www.webdeveloper.com
Results 1 to 13 of 13

Thread: Javascript Form Validation

Hybrid View

  1. #1
    Join Date
    Dec 2008
    Posts
    138

    Javascript Form Validation

    Hi, I found the below script to validate form. It validate when field is empty but I need to know how to use the same css border for validating the input (i.e. all numbers only or email format). Any help will be great. Thanks.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="Content-Script-Type" content="text/javascript">
    <meta name="Content-Style-Type" content="text/css">
    <title>Example</title>
    
    <script type="text/javascript">
    
    function check (f) {
    	var done = true, e, i = 0
    	while (e = f.elements[i++]) {if (e.type == 'text' && !/\S/.test (e.value)) {
    		e.parentNode.className = 'highlight'
    		e.onfocus = function () {this.parentNode.className = ''}
    		done = false
    	}}
    	return done
    }
    
    </script>
    
    <style type="text/css">
    form { margin:auto; width:11em}
    fieldset {padding:1ex}
    label {display:block; margin:0; text-align:left}
    label.highlight input {border:dotted 1px #C0C}
    button {display:block; margin:auto}
    </style>
    
    </head>
    <body>
    <form action="some-script.pl" onsubmit="return check (this)">
    <fieldset>
    <legend>Example</legend>
    <label>Name<input type="text"></label>
    <label>Rank<input type="text"></label>
    <label>Serial number<input type="text"></label>
    <button type="submit">Submit</button>
    </fieldset>
    </form>
    </body>
    </html>

  2. #2
    Join Date
    Mar 2009
    Posts
    452
    simply add more fields as you require. it will apply to new fields dynamically. for email validation you will have to add different regular expression and another for numbers.

  3. #3
    Join Date
    Dec 2008
    Posts
    138
    I am not familiar with Javascript. Can someone please provide an example of the regular expression for the email validation? I just need a little help with how to write the regular expression for incorrect format that uses the css styling border to highlight field (NOT the alert message type). Thanks
    Last edited by phpnewbie08; 10-11-2012 at 01:30 PM. Reason: clarify question

  4. #4
    Join Date
    Mar 2009
    Posts
    452
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="Content-Script-Type" content="text/javascript">
    <meta name="Content-Style-Type" content="text/css">
    <title>Example</title>
    <script type="text/javascript">
    
    function check (f) {
    	var done = true, e, i = 0;
    	while (e = f.elements[i++]) {
    		if (
    			(e.type == 'text' && !/\S/.test (e.value)) ||
    			(e.name == 'email' && is_email(e.value))
    		 ) {
    		e.parentNode.className = 'highlight';
    		e.onfocus = function () {this.parentNode.className = '';}
    		done = false;
    	}}
    	return done;
    }
    function is_email(email) {
       var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
       return reg.test(email);
    }
    </script>
    <style type="text/css">
    form {
    	margin:auto;
    	width:11em
    }
    fieldset {
    	padding:1ex
    }
    label {
    	display:block;
    	margin:0;
    	text-align:left
    }
    label.highlight input {
    	border:dotted 1px #C0C
    }
    button {
    	display:block;
    	margin:auto
    }
    </style>
    </head>
    <body>
    <form action="some-script.pl" onsubmit="return check (this);">
      <fieldset>
        <legend>Example</legend>
        <label>Name
          <input type="text" name="name">
        </label>
        <label>Email
          <input type="text" name="email">
        </label>
        <label>Rank
          <input type="text" name="rank">
        </label>
        <label>Serial number
          <input type="text" name="serial">
        </label>
        <button type="submit">Submit</button>
      </fieldset>
    </form>
    </body>
    </html>
    you can add new fields with their names and check each one for validity depending upon their name. just like i added email field.

    two pipe character || are used as OR operator in Javascript. for more you can search Javascript Operators on net.

  5. #5
    Join Date
    Dec 2008
    Posts
    138
    Hi ZABI, I tested your script but it does not validate the email.

  6. #6
    Join Date
    Mar 2009
    Posts
    452
    oh i am sorry i forgot to add NOT operator just before !is_email(e.value);

  7. #7
    Join Date
    Dec 2008
    Posts
    138
    thanks ZABI. It works great. Just one more question. How do I validate confirm email is same as the email provided?

  8. #8
    Join Date
    Dec 2008
    Posts
    138
    Also, how to validate checkbox is check and radio button?

    Quote Originally Posted by phpnewbie08 View Post
    thanks ZABI. It works great. Just one more question. How do I validate confirm email is same as the email provided?

  9. #9
    Join Date
    Mar 2009
    Posts
    452
    yes same for confirm email. you can validate checkbox and radio buttons using checked attribute. like !checkbox.checked and same for radio button

  10. #10
    Join Date
    Dec 2008
    Posts
    138
    I had been trying to get the confirm email and checkbox validation but with no luck. I am not sure what I have done wrong. Any help will be appreciated. Also, is it possible to change the e.type for empty field to class name?


    Thanks.

    Code:
    function check (f) {
    	var done = true, e, i = 0;
    	while (e = f.elements[i++]) {
    		if (
    			(e.type == 'text' && !/\S/.test (e.value)) ||
    			(e.name == 'email' && !is_email(e.value)) ||
    			(e.name == 'conemail' && !checkEmail(e.value)) ||
    			(e.name == 'term' && !chckBox(e.value)) 
    			
    		 ) {
    		e.parentNode.className = 'highlight';
    		e.onfocus = function () {this.parentNode.className = '';}
    		done = false;
    	}}
    	return done;
    }
    function is_email(email) {
       var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
       return reg.test(email);
    }
    
    function checkEmail(chkemail) {
        if (chkemail.email.value != chkemail.conemail.value)
        {
    return reg.test (chkemail)
    }
    
    
    function chckBox() {
    	if (
    	term == !checkbox.checked)
    	{
    		return done;
    	}

  11. #11
    Join Date
    Dec 2008
    Posts
    138
    I really need some help. Anyone?

  12. #12
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    Email field can be of type "text" in HTML4 while web bowsers that support the new HTML5 type="email" might see that type as "email" instead in your JavaScript.

    Given he fact that any email field will most likely include the string "email" in he field's name you coud just use:

    if(e.name.indexOf('email')!=-1 && !checkEmail(e){ return false; }

    For the checkbox keep in mind that your HTML might contain mutilple checkboxes with different names or use an array to group them under one name (e.g. myboxes[] )

    In either case you'd certainly only to have at least one checkbox ticked.

    The array naming is more JavaScript friendly because you can just use a for loop to determine whether there is a selected checkbox or not.

    However using the logic you already have in place:

    if(e.type='checkbox' && !e.checked){ return false; }

    There is really no need for the chkBox function is you have to test the checkboxes one at a time.

    function check (f) {
    var done = true, e, i = 0;
    while (e = f.elements[i++]) {
    if (e.type == 'text' && !/\S/.test (e.value)) { done=false; break;}
    else if(e.name.indexOf('email)!=-1 == 'email' && !checkEmail(e.value)){
    done=false; break;
    }
    else if(e.type == 'checkbox'' && !e.checked){done=false; break;}

    }//end while loop

    if(!done) {
    e.parentNode.className = 'highlight';
    e.onfocus = function () {this.parentNode.className = '';}
    done = false;
    }
    return done;
    }
    Last edited by holyhttp; 10-19-2012 at 06:20 PM.

  13. #13
    Join Date
    Dec 2008
    Posts
    138
    I figured out how to validate checkbox but still need help for the following:

    1. one of the 3 radio button is selected.
    2. drop down list (if "select one" is selected highlight the box).
    3. compare confirm email to email provided if not match highlight the box.

    Thanks.

Thread Information

Users Browsing this Thread

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

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