Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: css format

  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css format

    hi all,
    i have a simple form with 5 fields username,email id,password,retype password and phone no.they all to be displayed in correct format as one after other.my am getting error for last field i.e.,phone no is is not displayed properly
    how to display the 5th field in correct format...below is the code i have written in css..

    if there are more than 4 fields tell me how to display all in correct format.

    .form label
    {
    float:left;
    width:100px;
    padding:10px 10px 0 10px 0;
    font-weight:bold;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    below is the code i have written in css..
    Please post your HTML as well.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Location
    izmir
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    my friend you better send us your form complately so I can understand what is the problem, it seems all is ok but you may simply multipy the css code by giving diffrent names like .label1 .label2 .label3

  • #4
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    reply

    below is the code for simple login form having fields username,email id,password,retype password and phone no. i have done inline validation for
    user name .i am not getting for the other fields can u tell me how to do it..
    if possible using CSS also.

    Code:
    <html>
    <head>
    <meta charset="utf-8">
    <title>Validation using JavaScript</title>
    <script type="text/javascript">
       function checkName(form)
     {
       var eobj=document.getElementById('realnameerror');
       eobj.innerHTML='';
       var sRealName = form.realname.value;
        var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
        var isCorrectFormat = oRE.test(sRealName);
        var error=false;
        if (!isCorrectFormat)
        {
            error="Incorrect format.";
            form.realname.select();
            form.realname.focus();
        }
    
        else if (sRealName == '')
        {
            error='Error: Username cannot be blank!';
            form.realname.focus();
        }
        else if (sRealName.length < 4)
        {
            error="UserName should be atleast 4 characters long";
        }
        if (error){
         eobj.innerHTML=error;
         return false
        }
        return true;
     }
    
        function checkEmail(form)   /* for email validation */
        {
            if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))
            {
                return true;
            }
    
             alert('Invalid E-mail Address! Please re-enter.');
             return false;
        }
    
        function validatePwd(form)       /* password & retype-password verification */
        {
            var invalid = ' ';
            minLength = 6;
            var pw1 = form.password.value;
            var pw2 = form.password2.value;
    
    
            if (pw1 == '' || pw2 == '')
            {
                alert('Please enter your password twice.');
                return false;
            }
    
    
            if (form.password.value.length < minLength)
            {
                alert('Your password must be at least ' + minLength + ' characters long. Try again.');
                return false;
            }
    
            if (document.form.password.value.indexOf(invalid) > -1)
            {
                alert('Sorry, spaces are not allowed.');
                return false;
            }
            else
            {
                if (pw1 != pw2)
                {
                    alert('You did not enter the same new password twice. Please re-enter your password.');
                    return false;
                   }
                else
                 {
                    alert('Passwords Match.');
                       return false;
                 }
    
                return false;
            }
        }
    
        function validPhone(form)          /* phone no validation */
        {
            var valid = '0123456789';
            phone = form.phoneno.value;
    
            if (phone == '')
            {
                alert('This field is required. Please enter phone number');
                return false;
            }
    
            if (!phone.length > 1 || phone.length < 10)
            {
                alert('Invalid phone number length! Please try again.');
                return false;
            }
    
            for (var i = 0; i < phone.length; i++)
            {
                temp = '' + phone.substring(i, i + 1);
    
                if (valid.indexOf(temp) == -1)
                {
                    alert('Invalid characters in your phone. Please try again.');
                    return false;
                }
            }
    
            return true;
        }
    
        function validate() {
            var form = document.forms['form'];
    
            if (!checkName(form) || !checkEmail(form) || !validatePwd(form) || !validPhone(form))
            {
                return false;
            }
    
            return true;
        }
    </script>
    </head>
    <body>
    
    <form action="" method="post" name="form" onsubmit="return validate()">
        User Name : <input type="text" name="realname" size="19"><span id="realnameerror" ></span>
        <br>
        E-Mail    : <input type="text" name="email" size="25">
        <br>
        Password  : <input type="password" name="password" maxlength="12" size="25">
        <br>
        Retype password: <input type="password" name="password2" maxlength="12" size="25">
        <br>
        PhoneNo   : <input type="phoneno" name="phoneno" maxlength="10" size="25">
        <br>
        <input type="submit" value="Submit">
    </form>
     </body>
    </html>

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    inline form validation

    hi all,
    below is the code for simple login form having fields username,email id,password,retype password and phone no. i have done inline validation for
    checkName() .i am not getting for the other fields can u tell me how to do it..

    Code:
    <html>
    <head>
    <meta charset="utf-8">
    <title>Validation using JavaScript</title>
    <script type="text/javascript">
       function checkName(form)
     {
       var eobj=document.getElementById('realnameerror');
       eobj.innerHTML='';
       var sRealName = form.realname.value;
        var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
        var isCorrectFormat = oRE.test(sRealName);
        var error=false;
        if (!isCorrectFormat)
        {
            error="Incorrect format.";
            form.realname.select();
            form.realname.focus();
        }
    
        else if (sRealName == '')
        {
            error='Error: Username cannot be blank!';
            form.realname.focus();
        }
        else if (sRealName.length < 4)
        {
            error="UserName should be atleast 4 characters long";
        }
        if (error){
         eobj.innerHTML=error;
         return false
        }
        return true;
     }
    
        function checkEmail(form)   /* for email validation */
        {
            if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))
            {
                return true;
            }
    
             alert('Invalid E-mail Address! Please re-enter.');
             return false;
        }
    
        function validatePwd(form)       /* password & retype-password verification */
        {
            var invalid = ' ';
            minLength = 6;
            var pw1 = form.password.value;
            var pw2 = form.password2.value;
    
    
            if (pw1 == '' || pw2 == '')
            {
                alert('Please enter your password twice.');
                return false;
            }
    
    
            if (form.password.value.length < minLength)
            {
                alert('Your password must be at least ' + minLength + ' characters long. Try again.');
                return false;
            }
    
            if (document.form.password.value.indexOf(invalid) > -1)
            {
                alert('Sorry, spaces are not allowed.');
                return false;
            }
            else
            {
                if (pw1 != pw2)
                {
                    alert('You did not enter the same new password twice. Please re-enter your password.');
                    return false;
                   }
                else
                 {
                    alert('Passwords Match.');
                       return false;
                 }
    
                return false;
            }
        }
    
        function validPhone(form)          /* phone no validation */
        {
            var valid = '0123456789';
            phone = form.phoneno.value;
    
            if (phone == '')
            {
                alert('This field is required. Please enter phone number');
                return false;
            }
    
            if (!phone.length > 1 || phone.length < 10)
            {
                alert('Invalid phone number length! Please try again.');
                return false;
            }
    
            for (var i = 0; i < phone.length; i++)
            {
                temp = '' + phone.substring(i, i + 1);
    
                if (valid.indexOf(temp) == -1)
                {
                    alert('Invalid characters in your phone. Please try again.');
                    return false;
                }
            }
    
            return true;
        }
    
        function validate() {
            var form = document.forms['form'];
    
            if (!checkName(form) || !checkEmail(form) || !validatePwd(form) || !validPhone(form))
            {
                return false;
            }
    
            return true;
        }
    </script>
    </head>
    <body>
    
    <form action="" method="post" name="form" onsubmit="return validate()">
        User Name : <input type="text" name="realname" size="19"><span id="realnameerror" ></span>
        <br>
        E-Mail    : <input type="text" name="email" size="25">
        <br>
        Password  : <input type="password" name="password" maxlength="12" size="25">
        <br>
        Retype password: <input type="password" name="password2" maxlength="12" size="25">
        <br>
        PhoneNo   : <input type="phoneno" name="phoneno" maxlength="10" size="25">
        <br>
        <input type="submit" value="Submit">
    </form>
     </body>
    </html>

  • #6
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    reply

    it is just a simple one with out using CSS ..
    first i want to complete this one and then i go for CSS using which different
    styles can be implemented....
    i have tried for other functions also not knowing what is the error..
    can any one tell me how to solve.....
    below is the modified code.......

    Code:
    <html>
    <head>
    <meta charset="utf-8">
    <title>Validation using JavaScript</title>
    <script type="text/javascript">
       function checkName(form)
     {
       var eobj1=document.getElementById('realnameerror');
       eobj1.innerHTML='';
       var sRealName = form.realname.value;
        var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
        var isCorrectFormat = oRE.test(sRealName);
        var error=false;
        if (!isCorrectFormat)
        {
            error="Incorrect format.";
            form.realname.select();
            form.realname.focus();
        }
    
        else if (sRealName == '')
        {
            error='Error: Username cannot be blank!';
            form.realname.focus();
        }
        else if (sRealName.length < 4)
        {
            error="UserName should be atleast 4 characters long";
        }
        if (error)
    	{
         eobj1.innerHTML=error;
         return false;
        }
        return true;
     }
    
        function checkEmail(form)   /* for email validation */
        {
            var eobj2=document.getElementById('emailerror');
            eobj2.innerHTML='';
            var error=false;
    		if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))
            {
                return true;
            }
    		else 
             error='Invalid E-mail Address! Please re-enter';
             return false;
        }
    
        function validatePwd(form)       /* password & retype-password verification */
        {
            var eobj3=document.getElementById('passworderror');
            eobj3.innerHTML='';
    		var error=false;
    		var invalid = ' ';
            minLength = 6;
            var pw1 = form.password.value;
            var pw2 = form.password2.value;
    
             if (pw1 == '' || pw2 == '')
            {
                error='Please enter your password twice.';
                return false;
            }
    
            if (form.password.value.length < minLength)
            {
                error='Your password must be at least ' + minLength + ' characters long. Try again.';
                return false;
            }
    
            if (document.form.password.value.indexOf(invalid) > -1)
            {
                error='Sorry, spaces are not allowed.';
                return false;
            }
            else
            {
                if (pw1 != pw2)
                {
                    error='You did not enter the same new password twice. Please re-enter your password.';
                    return false;
                   }
                else
                 {
                    error='Passwords Match.';
                       return false;
                 }
    
                return false;
            }
        }
    
        function validPhone(form)          /* phone no validation */
        {
            var eobj4=document.getElementById('phonenoerror');
            eobj4.innerHTML='';
    		var valid = '0123456789';
            phone = form.phoneno.value;
    
            if (phone == '')
            {
                error:'This field is required. Please enter phone number';
                return false;
            }
    
            if (!phone.length > 1 || phone.length < 10)
            {
                error:'Invalid phone number length! Please try again.';
                return false;
            }
    
            for (var i = 0; i < phone.length; i++)
            {
                temp = '' + phone.substring(i, i + 1);
    
                if (valid.indexOf(temp) == -1)
                {
                    error='Invalid characters in your phone. Please try again.';
                    return false;
                }
            }
    		if (error)
    		{
               eobj4.innerHTML=error;
               return false;
    	    }
            return true;
        }
    
        function validate() {
            var form = document.forms['form'];
    
            if (!checkName(form) || !checkEmail(form) || !validatePwd(form) || !validPhone(form))
            {
                return false;
            }
    
            return true;
        }
    </script>
    </head>
    <body>
    
    <form action="" method="post" name="form" onsubmit="return validate()">
        User Name : <input type="text" name="realname" size="19"><span id="realnameerror" ></span>
        <br>
        E-Mail    : <input type="text" name="email" size="25"><span id="emailerror "></span>
        <br>
        Password  : <input type="password" name="password" maxlength="12" size="25"><span id="passworderror "></span>
        <br>
        Retype password: <input type="password" name="password2" maxlength="12" size="25"><span id="repassworderror"></span>
        <br>
        PhoneNo   : <input type="phoneno" name="phoneno" maxlength="10" size="25"><span id="phonenoerror"></span>
        <br>
        <input type="submit" value="Submit">
    </form>
    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •