www.webdeveloper.com
Results 1 to 3 of 3

Thread: javascript validation errors to be displayed after each textbox

  1. #1
    Join Date
    Jan 2014
    Posts
    10

    Exclamation javascript validation errors to be displayed after each textbox

    Hello all,
    I am quite stuck with the validation part with different requirement in validation. Below is the list which i am working for my application module:
    a. Form will consist of two input fields (name and email) and a submit button.
    b. On submit, the validation should check if the fields are empty.
    c. If any field is empty, the text colour as well as border of the field should turn red. (No need to show an error message)
    d. When I start typing in the field, The text and border colour should return to default colour.

    Below is the code which i had tried:

    HTML Code:
    <center>
    <table border="1" >
    <tr>
    <td>
    <form name = "registerationform" method="POST" action="welcome.html" onsubmit="return(regvalidate())">
    <table>
    <tr>
    <td>First Name: </td> <td><input type = "text" name="fnametxt" /><br/> </td>
    </tr>
    <tr>
    <td>Second Name: </td> <td> <input type = "text" name="snametxt" /><br/></td>
    </tr>
    <tr>
    <td> User Name:</td> <td><input type = "text" name="unametxt" /><br/> </td>
    </tr>
    <tr>
    <td>Email Address: </td> <td> <input type = "text" name="emailtxt" /><br/></td>
    </tr>
    </tr>
    <tr>
    <td> Password : </td> <td> <input type = "password" name="pwdtxt" /> <br/> </td>
    </tr>
    </tr>
    <tr>
    <td> Confirm : </td> <td> <input type = "password" name="cpwdtxt" /> <br/> </td>
    </tr>
    </table>
    <font color='red'> <DIV id="une"> </DIV> </font>
    <input type = "submit" value="Register Now" />
    </form>
    </td>
    </th>
    </tr>
    </table>
    </tr>
    </table>
    </tr>
    <SCRIPT type="Text/JavaScript">
    function regvalidate()
    
    {
    if((document.registerationform.fnametxt.value=="")&&(document.registerationform.snametxt.value==""))
     {
      document.getElementById('une').innerHTML = "First name or Second name should not be empty";
      registerationform.fnametxt.focus();
      return(false);
     }
    
    if(document.registerationform.unametxt.value=="")
      {
      document.getElementById('une').innerHTML = "User name field should not be empty";
      registerationform.unametxt.focus();
      return(false);
     }
    
    if(document.registerationform.emailtxt.value=="")
      {
      document.getElementById('une').innerHTML = "Email id requered";
      registerationform.emailtxt.focus();
      return(false);
      }
    
    if(document.registerationform.pwdtxt.value=="")
       {
      document.getElementById('une').innerHTML = "Please type a password";
      registerationform.pwdtxt.focus();
      return(false);
       }
    
    if((document.registerationform.pwdtxt.value) != (document.registerationform.cpwdtxt.value))
       {
      document.getElementById('une').innerHTML = "Password Must be equal";
      registerationform.pwdtxt.value = "";
      registerationform.cpwdtxt.value = "";
      registerationform.pwdtxt.focus();
      return(false);
      }
    else
       {
       return(true);
       }
    }
    </SCRIPT>
    </td>
    </tr>
    </table>
    </center>
    The above form works for all the fields but i need only two as specified above as well as the textbox border coloring for errors.
    Really need help. If someone could plese help me out

  2. #2
    Join Date
    Oct 2013
    Posts
    483
    The modern, HTML5 way:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8"/>
    		<title>required</title>
    	</head>
    	<body>
    	<form action="" method="post">
    		<label for="name">Name:</label> <input style="text-transform:capitalize;" type="text" required id="name" /><br>
    		<label for="email">E-mail Address:</label> <input type="email" required id="email" /><br>
    		<input type="submit" value="Submit"/>
    	</form>
    	</body>
    </html>
    Last edited by Kevin2; 04-25-2014 at 02:24 PM.

  3. #3
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    This article on HTML5 forms should help with form validation.
    When you face situations where a client doesn't support some or all the features you use. You can use HTML5 polyfills.
    And if your form is sent to the sever-side, use server-side validation in conjunction with the html5/javascript validation.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles