April 27, 201214 yr Hi every1, First of all, I have no idea how to create javascript. I have to create contact form (I have already built it, please find attachement) validated by JavaScript following client requirments as shown below: First Name- Mandatory – make sure that an entry has been made in this field. Second Name – Mandatory - – make sure that an entry has been made in this field. House number or name – Mandatory – make sure that an entry has been made in this field. Street name – Mandatory - – make sure that an entry has been made in this field. Town – Mandatory - – make sure that an entry has been made in this field. Post Code – Mandatory - – make sure that an entry has been made in this field. Mobile – Must have an entry if Home is blank, if an entry has been made strip out all non-numeric characters. Home – Must have an entry if Mobile is blank, if an entry has been made strip out all non-numeric characters. Email – Mandatory, plus check the format of the email address entered – it must contain an @ symbol at some point after the first character followed by a dot at some point after the third character – the dot cannot be the last character. Newspapers Read – if one of the choices is ‘Other’ then the ‘State one other Newspaper you read’ field becomes mandatory. State one other Newspaper you read –Mandatory if the ‘Other’ option is chosen in the Newspapers Read field. Comments – Mandatory and must contain at least 15 characters. When the Submit button is clicked the JavaScript will call a function which will validate the entries made on the form. A validation with errors will issue an appropriate JavaScript alert message to indicate fields in error. The cursor will also be focussed on the first field in error. A validation with no errors will issue a JavaScript alert message to read ‘Thank you for your enquiry’. When the Reset button is clicked all fields in the Form will be cleared of entries and the cursor will be focussed back to the first field at the top of the form I know it could be validated by PHP much more simple, but JavaScript is necessary. Please find attached files - .html file and .css. All the best, Design92 style.css contact.html Edited April 27, 201214 yr by design92
April 27, 201214 yr I'll help encourage you to do your best! Go for it! Teach that javascript who is boss!
April 27, 201214 yr Author I'll help encourage you to do your best! Go for it! Teach that javascript who is boss! Hah, well thanks so much for encouraging me and I would teach that javascript who is the boss, but I don't know even the basis, that's why I came here :-)
April 27, 201214 yr If you can validate by php, you can learn javascript syntax and finish this within a few hours! Logic is the same. Just how you type is different. Edited April 27, 201214 yr by rrr
April 27, 201214 yr Author If you can validate by php, you can learn javascript syntax and finish this within a few hours! Logic is the same. Just how you type is different. That's the point.. I can't validate by php. I used to use spry validation in Adobe Dreamweaver so it was quite fast and understandable, but when it comes to write up lines of code from scratch unfortunately I can't do that. I really need to write this validation in JavaScript, and I don't know how to do that either both java, or php. Please if you know how to do that, help me.
April 27, 201214 yr Author Do you know how to validate multiple values such as name and then surname, with different error messages when validated? This is the basic code which validates one value which is first name, how do I add to this another values such as surname etc? function validateForm() { var x=document.forms["myForm"]["fname"].value; if (x==null || x=="") { alert("First name must be filled out"); return false; } } Edited April 27, 201214 yr by design92
April 27, 201214 yr Author Hi every1, First of all, I have no idea how to create javascript or PHP. I have to create contact form (I have already built it, please find attachement) validated by JavaScript following client requirments as shown below: First Name- Mandatory – make sure that an entry has been made in this field. Second Name – Mandatory - – make sure that an entry has been made in this field. House number or name – Mandatory – make sure that an entry has been made in this field. Street name – Mandatory - – make sure that an entry has been made in this field. Town – Mandatory - – make sure that an entry has been made in this field. Post Code – Mandatory - – make sure that an entry has been made in this field. Mobile – Must have an entry if Home is blank, if an entry has been made strip out all non-numeric characters. Home – Must have an entry if Mobile is blank, if an entry has been made strip out all non-numeric characters. Email – Mandatory, plus check the format of the email address entered – it must contain an @ symbol at some point after the first character followed by a dot at some point after the third character – the dot cannot be the last character. Newspapers Read – if one of the choices is ‘Other’ then the ‘State one other Newspaper you read’ field becomes mandatory. State one other Newspaper you read –Mandatory if the ‘Other’ option is chosen in the Newspapers Read field. Comments – Mandatory and must contain at least 15 characters. When the Submit button is clicked the JavaScript will call a function which will validate the entries made on the form. A validation with errors will issue an appropriate JavaScript alert message to indicate fields in error. The cursor will also be focussed on the first field in error. A validation with no errors will issue a JavaScript alert message to read ‘Thank you for your enquiry’. When the Reset button is clicked all fields in the Form will be cleared of entries and the cursor will be focussed back to the first field at the top of the form I know it could be validated by PHP much more simple, but JavaScript is necessary. Please find attached files - .html file and .css. All the best, Design92 contact.html style.css
April 27, 201214 yr Author So you want somebody to write the code for you? Yes, if its possible of course. I have no idea how to write JavaScript. I had a look on http://www.w3schools.com/ but still it did not help me as I don't know how to validate multiple values.
April 27, 201214 yr Moved this post to pm. Please don't help via PM. The point of this forum is that one post may help many many people. Helping people by PM takes this away and others will come on here asking the same questions.
April 27, 201214 yr Author Can anyone please help me to write validation script for this form? It is so important for me..
April 28, 201214 yr Author Help you write it? Sure. Write it for you? Nah I would appreciate your help. First of all, I found some validation javascript, but I do not know how to validate multiple values such as first name, last name etc. This is the code for simple validation of first name. How do I add validation of last name into it? function validateForm() { var x=document.forms["myForm"]["fname"].value; if (x==null || x=="") { alert("First name must be filled out"); return false; } }
April 28, 201214 yr Just use the jQuery Validation plugin. It's extremely easy and there are plenty of tutorials, help pages, FAQs and documentation.
April 28, 201214 yr Author Just use the jQuery Validation plugin. It's extremely easy and there are plenty of tutorials, help pages, FAQs and documentation. Hi brightonmike, is Java equivalent to jQuery? If my client requested script in JavaScript, and I'll use jQuery, will it make any difference? Where do I found this plugin?
April 28, 201214 yr Hi brightonmike, is Java equivalent to jQuery? If my client requested script in JavaScript, and I'll use jQuery, will it make any difference? Where do I found this plugin? Couple of things to clear up that will make this all easier to understand. Java is not JavaScript. They're completely different languages in style and form. JQuery is JavaScript. It's a framework written in JavaScript to help speed up deployment of complicated JavaScript scripts. Is this for a client? The way you've worded the first post makes me think this is for a course or school/uni project. No one here will write it for you but we will point you in the right direction.
April 28, 201214 yr Author Couple of things to clear up that will make this all easier to understand. Java is not JavaScript. They're completely different languages in style and form. JQuery is JavaScript. It's a framework written in JavaScript to help speed up deployment of complicated JavaScript scripts. Is this for a client? The way you've worded the first post makes me think this is for a course or school/uni project. No one here will write it for you but we will point you in the right direction. Thanks for explanation, I have no knowledge about programming and this kind of stuff Wow, so it sounds very good for me. I am not asking any to write it for me, but if I could get a support from you, I would really appreciate it. So once I built my contact form, and need to start of with my validation, what is the right direction? I know as you said, JQuery plugin, but what exactly do you mean and where do I get it from? Yes, it is for my friends website so this is why I am saying client :-) Thank you for your help. @edit Is that the jquery plugin you told me about? How to use it? http://bassistance.de/jquery-plugins/jquery-plugin-validation/ Edited April 28, 201214 yr by design92
April 29, 201214 yr Author Yes, that's it. It tells you how to use it in the documentation. Well its confusing. I downloaded the files an have a lot of different scripts and stuff, when I open up file in a browser I have a lot of different examples of forms. How do I use it? When I went to the documentation, it doesnt say anything how to use it. Could you please give me the first example of validating field "fname" with jQuery and I will try to figure out how it works? This is my current code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Title of website</title> <link href="style.css" rel="stylesheet" type="text/css" /> <meta name="Author" content="bla bla bla" /> <script type="text/javascript"> function validateForm() { var a=document.forms["contactform"] ["fname"] .value; var b=document.forms["contactform"] ["lname"] .value; var c=document.forms["contactform"] ["house_number"] .value; var d=document.forms["contactform"] ["street_name"] .value; var e=document.forms["contactform"] ["town"] .value; var f=document.forms["contactform"] ["post_code"] .value; if (a==null || a=="") { alert("First name must be filled out."); return false; } else if (b==null || b=="") { alert("Last name must be filled out."); return false; } else if (c==null || c=="") { alert("Please fill in your house number."); return false; } else if (d==null || d=="") { alert("Please fill in your street name."); return false; } else if (e==null || e=="") { alert("Please fill in your town."); return false; } else if (f==null || f=="") { alert("Please fill in your postcode."); return false; } } </script> </head> <body> <div id="wrapper"> <div id="content"> <form id="contactform" name="contactform" onsubmit="return validateForm()" method="post" action="javascript:alert('Thank you for your enquiry')" > <div id="contact1"> <table width="288" border="0" class="table_colour"> <tr> <td colspan="2" class="contactform">Contact Form:</td> </tr> <tr> <td width="128"><label for="fname">First Name:</label></td> <td width="148"><input name="fname" type="text" id="first_name" /></td> </tr> <tr> <td><label for="last_name">Last Name:</label></td> <td><input type="text" name="lname" id="lname" /></td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td><label for="house_number">House Number:</label></td> <td><input type="text" name="house_number" id="house_number" /></td> </tr> <tr> <td><label for="street_name">Street Name:</label></td> <td><input type="text" name="street_name" id="street_name" /></td> </tr> <tr> <td><label for="town">Town:</label></td> <td><input type="text" name="town" id="town" /></td> </tr> <tr> <td><label for="post_code">Post Code:</label></td> <td><input type="text" name="post_code" id="post_code" /></td> </tr> </table> </div> <div id="contact2"> <table width="270" border="0" class="table_colour"> <tr> <td colspan="2"> </td> </tr> <tr> <td width="74"><label for="mobile">Mobile:</label></td> <td width="184"><input type="text" name="mobile" id="mobile" /></td> </tr> <tr> <td><label for="home">Home:</label></td> <td><input type="text" name="home2" id="home2" /></td> </tr> <tr> <td><label for="email">E-mail:</label></td> <td><input type="text" name="email2" id="email2" /></td> </tr> <tr> <td colspan="2">Accommondation: <table width="200"> <tr> <td><input type="radio" name="accommondation" value="owner" id="accommondation_0" /> Owner</td> <td><input type="radio" name="accommondation" value="rented" id="accommondation_1" /> Rented</td> </tr> </table></td> </tr> <tr> <td colspan="2">Age: <table width="200"> <tr> <td><label> <input type="radio" name="age" value="<20" id="age_0" /> <20</label></td> <td><input type="radio" name="age" value="41-60" id="age_2" /> 41-60</td> </tr> <tr> <td><label> <input type="radio" name="age" value="21-40" id="age_1" /> 21-40</label></td> <td><input type="radio" name="age" value=">61" id="age_3" /> >61</td> </tr> </table></td> </tr> <tr> <td height="123" colspan="2"><p> <label for="comments">Comments:</label> </p> <p> <textarea style="resize:vertical" name="comments" id="comments" cols="30" rows="5"></textarea> </p></td> </tr> </table> </div> <div id="contact3"> <table width="310" border="0" class="table_colour"> <tr> <td colspan="2"> </td> </tr> <tr> <td height="155" colspan="2">Newspapers Read: <table width="310"> <tr> <td width="144"><label> <input type="checkbox" name="newspapers" value="none" id="newspapers_0" /> None</label></td> <td width="144"><input type="checkbox" name="newspapers_" value="dailymail" id="newspapers_4" /> Daily Mail</td> </tr> <tr> <td><label> <input type="checkbox" name="newspapers" value="thesun" id="newspapers_1" /> The Sun</label></td> <td><input type="checkbox" name="newspapers_2" value="thetimes" id="newspapers_5" /> The Times</td> </tr> <tr> <td><label> <input type="checkbox" name="newspapers" value="dailymirror" id="newspapers_2" /> Daily Mirror</label></td> <td><input type="checkbox" name="newspapers_3" value="theindependent" id="newspapers_6" /> The Independent</td> </tr> <tr> <td><label> <input type="checkbox" name="newspapers" value="dailyexpress" id="newspapers_3" /> Daily Express</label></td> <td><input type="checkbox" name="newspapers_4" value="theobserver" id="newspapers_7" /> The Observer</td> </tr> <tr> <td height="24" colspan="2"><input type="checkbox" name="newspapers_5" value="other" id="newspapers_8" /> Other</td> </tr> </table></td> </tr> <tr> <td width="135"><label for="newspapers_other">Please specify other:</label></td> <td width="171"><input type="text" name="newspapers_other" id="newspapers_other" /></td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td> </td> <td><input type="submit" name="submit" id="submit" value="Submit" /> <input type="reset" name="reset" id="reset" value="Reset" /></td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td colspan="2"> </td> </tr> </table> </div> </form> </div> </div> </body> </html> Edited April 29, 201214 yr by design92
April 29, 201214 yr Play around with the demo to get a feel for how it works and look at the source code of the index file. You will see that the names of the html form fields are used by the js script so you need to ensure that you use exactly the same names or else change the names in the js script to match yours e.g. you use fname, the js script uses firstname. By looking at the source code you can also see which files are included. So in the head section of you html page make sure you link to those files and make sure you get your file structure correct or it won't work. Also be sure the jquery file is the first file you include. You can use your own css file or the one that's been included - just make sure you use the same classes and ids. How strict do you want the validation to be - your code only validates that something is entered into the fields. The jQuery plugin you've chosen does more than just check for data entry. Look at the rules definition in the js script to see what kind of checking it does.
April 29, 201214 yr Author Play around with the demo to get a feel for how it works and look at the source code of the index file. You will see that the names of the html form fields are used by the js script so you need to ensure that you use exactly the same names or else change the names in the js script to match yours e.g. you use fname, the js script uses firstname. By looking at the source code you can also see which files are included. So in the head section of you html page make sure you link to those files and make sure you get your file structure correct or it won't work. Also be sure the jquery file is the first file you include. You can use your own css file or the one that's been included - just make sure you use the same classes and ids. How strict do you want the validation to be - your code only validates that something is entered into the fields. The jQuery plugin you've chosen does more than just check for data entry. Look at the rules definition in the js script to see what kind of checking it does. I want my validation to be simple, it just validates if the entry has been made, if the email format is correct and few dependencies. I had a look and understand it a bit, but I don't know how to add validation for example: validate: first name last name e-mail with appropriate format. I was trying to play with the code but it doesnt work for me. Please give me an example so I can see how you do it. You don't have to do whole bit, just 2 or 3 values and I'll try to do the rest.
April 29, 201214 yr <style> .error { color: red; font-style: italic; } </style> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.validate.js" type="text/javascript"></script> <script type="text/javascript"> $.validator.setDefaults({ submitHandler: function() { alert("submitted!"); } }); $().ready(function() { // validate contact form on keyup and submit $("#contactform").validate({ rules: { firstname: "required", lastname: "required", username: { required: true, minlength: 2 }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true }, topic: { required: "#newsletter:checked", minlength: 2 }, agree: "required" }, messages: { firstname: "Please enter your firstname", lastname: "Please enter your lastname", username: { required: "Please enter a username", minlength: "Your username must consist of at least 2 characters" }, password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long" }, confirm_password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long", equalTo: "Please enter the same password as above" }, email: "Please enter a valid email address", agree: "Please accept our policy" } }) }); </script> </head> Add the above in the head section of your html page to see the validation work on firstname and lastname. You should then be able to determine how to get the rest of your fields validated. Note a couple of things: $("#contactform").validate({ This line lets the script know which form to act on - notice how I changed it from #signupForm to #contactform because your form is identified as contactform. The validation rules are set up for you, so just add your field names to the rule you want to use and make sure your names agree in the rules and the messages section. I included some css in the head section so I could see it working. Its not good practice to include styling in the mark up so add the error class in your external style sheet to achieve the same affect. I am accessing the jquery file via google's online library but you could use the downloaded file if you prefer, just make sure that you link to it before you link to the validate.js file and put it in the correct directory. you use the literals < and > in your form, some browsers might not like it and do funny things to your page. Substitute < and > (less than and greater than) for those characters in the age bit of your form. in your form tag, take out the action attribute or set it to ""
April 29, 201214 yr Author <style> .error { color: red; font-style: italic; } </style> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.validate.js" type="text/javascript"></script> <script type="text/javascript"> $.validator.setDefaults({ submitHandler: function() { alert("submitted!"); } }); $().ready(function() { // validate contact form on keyup and submit $("#contactform").validate({ rules: { firstname: "required", lastname: "required", username: { required: true, minlength: 2 }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true }, topic: { required: "#newsletter:checked", minlength: 2 }, agree: "required" }, messages: { firstname: "Please enter your firstname", lastname: "Please enter your lastname", username: { required: "Please enter a username", minlength: "Your username must consist of at least 2 characters" }, password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long" }, confirm_password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long", equalTo: "Please enter the same password as above" }, email: "Please enter a valid email address", agree: "Please accept our policy" } }) }); </script> </head> Add the above in the head section of your html page to see the validation work on firstname and lastname. You should then be able to determine how to get the rest of your fields validated. Note a couple of things: $("#contactform").validate({ This line lets the script know which form to act on - notice how I changed it from #signupForm to #contactform because your form is identified as contactform. The validation rules are set up for you, so just add your field names to the rule you want to use and make sure your names agree in the rules and the messages section. I included some css in the head section so I could see it working. Its not good practice to include styling in the mark up so add the error class in your external style sheet to achieve the same affect. I am accessing the jquery file via google's online library but you could use the downloaded file if you prefer, just make sure that you link to it before you link to the validate.js file and put it in the correct directory. you use the literals < and > in your form, some browsers might not like it and do funny things to your page. Substitute < and > (less than and greater than) for those characters in the age bit of your form. in your form tag, take out the action attribute or set it to "" Thanks so much for your help! I really appreciate it. I have only one question. My form is not validating when I click on submit and I thought there's something wrong will my form action by itself, or fields are different but it looks okay. please have a look on it, I have taken out action attribute as u said. I have also noticed that there is a link to <script src="jquery.validate.js" type="text/javascript"></script> but dreamweaver says it cannot be located on the disk. So where is this file? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Title of website</title> <link href="style.css" rel="stylesheet" type="text/css" /> <meta name="Author" content="bla bla bla" /> <style> .error { color: red; font-style: italic; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.validate.js" type="text/javascript"></script> <script type="text/javascript"> $.validator.setDefaults({ submitHandler: function() { alert("submitted!"); } }); $().ready(function() { // validate contact form on keyup and submit $("#contactform").validate({ rules: { firstname: "required", lastname: "required", username: { required: true, minlength: 2 }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true }, topic: { required: "#newsletter:checked", minlength: 2 }, agree: "required" }, messages: { firstname: "Please enter your firstname", lastname: "Please enter your lastname", username: { required: "Please enter a username", minlength: "Your username must consist of at least 2 characters" }, password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long" }, confirm_password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long", equalTo: "Please enter the same password as above" }, email: "Please enter a valid email address", agree: "Please accept our policy" } }) }); </script> </head> <body> <div id="wrapper"> <div id="content"> <form id="contactform" name="contactform" onsubmit="return validateForm()" method="post" action="" > <div id="contact1"> <table width="288" border="0" class="table_colour"> <tr> <td colspan="2" class="contactform">Contact Form:</td> </tr> <tr> <td width="128"><label for="firstname">First Name:</label></td> <td width="148"><input name="firstname" type="text" id="firstname" /></td> </tr> <tr> <td><label for="last_name">Last Name:</label></td> <td><input type="text" name="lname" id="lastname" /></td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td><label for="house_number">House Number:</label></td> <td><input type="text" name="house_number" id="house_number" /></td> </tr> <tr> <td><label for="street_name">Street Name:</label></td> <td><input type="text" name="street_name" id="street_name" /></td> </tr> <tr> <td><label for="town">Town:</label></td> <td><input type="text" name="town" id="town" /></td> </tr> <tr> <td><label for="post_code">Post Code:</label></td> <td><input type="text" name="post_code" id="post_code" /></td> </tr> </table> </div> <div id="contact2"> <table width="270" border="0" class="table_colour"> <tr> <td colspan="2"> </td> </tr> <tr> <td width="74"><label for="mobile">Mobile:</label></td> <td width="184"><input type="text" name="mobile" id="mobile" /></td> </tr> <tr> <td><label for="home">Home:</label></td> <td><input type="text" name="home2" id="home2" /></td> </tr> <tr> <td><label for="email">E-mail:</label></td> <td><input type="text" name="email2" id="email2" /></td> </tr> <tr> <td colspan="2">Accommondation: <table width="200"> <tr> <td><input type="radio" name="accommondation" value="owner" id="accommondation_0" /> Owner</td> <td><input type="radio" name="accommondation" value="rented" id="accommondation_1" /> Rented</td> </tr> </table></td> </tr> <tr> <td colspan="2">Age: <table width="200"> <tr> <td><label> <input type="radio" name="age" value="<20" id="age_0" /> <20</label></td> <td><input type="radio" name="age" value="41-60" id="age_2" /> 41-60</td> </tr> <tr> <td><label> <input type="radio" name="age" value="21-40" id="age_1" /> 21-40</label></td> <td><input type="radio" name="age" value=">61" id="age_3" /> >61</td> </tr> </table></td> </tr> <tr> <td height="123" colspan="2"><p> <label for="comments">Comments:</label> </p> <p> <textarea style="resize:vertical" name="comments" id="comments" cols="30" rows="5"></textarea> </p></td> </tr> </table> </div> <div id="contact3"> <table width="310" border="0" class="table_colour"> <tr> <td colspan="2"> </td> </tr> <tr> <td height="155" colspan="2">Newspapers Read: <table width="310"> <tr> <td width="144"><label> <input type="checkbox" name="newspapers" value="none" id="newspapers_0" /> None</label></td> <td width="144"><input type="checkbox" name="newspapers_" value="dailymail" id="newspapers_4" /> Daily Mail</td> </tr> <tr> <td><label> <input type="checkbox" name="newspapers" value="thesun" id="newspapers_1" /> The Sun</label></td> <td><input type="checkbox" name="newspapers_2" value="thetimes" id="newspapers_5" /> The Times</td> </tr> <tr> <td><label> <input type="checkbox" name="newspapers" value="dailymirror" id="newspapers_2" /> Daily Mirror</label></td> <td><input type="checkbox" name="newspapers_3" value="theindependent" id="newspapers_6" /> The Independent</td> </tr> <tr> <td><label> <input type="checkbox" name="newspapers" value="dailyexpress" id="newspapers_3" /> Daily Express</label></td> <td><input type="checkbox" name="newspapers_4" value="theobserver" id="newspapers_7" /> The Observer</td> </tr> <tr> <td height="24" colspan="2"><input type="checkbox" name="newspapers_5" value="other" id="newspapers_8" /> Other</td> </tr> </table></td> </tr> <tr> <td width="135"><label for="newspapers_other">Please specify other:</label></td> <td width="171"><input type="text" name="newspapers_other" id="newspapers_other" /></td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td> </td> <td><input type="submit" name="submit" id="submit" value="Submit" /> <input type="reset" name="reset" id="reset" value="Reset" /></td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td colspan="2"> </td> </tr> </table> </div> </form> </div> </div> </body> </html>
April 29, 201214 yr The hint is in the error message - where did you put it? The way I've linked it, it has to be in the same directory as contact.html. Really you should have separate folders for the css files and the js files etc. So if you've put it in a js folder and assuming the js file is in the same directory as contact.html, change <script src="jquery.validate.js" type="text/javascript"></script> to <script src="js/jquery.validate.js" type="text/javascript"></script> The way you currently have your form coded, the validation won't work on the last name field. Where possible you want to keep all the field attributes, label fors etc the same to minimise errors - you've used last_name, lname and lastname. Just a suggestion...
April 29, 201214 yr Author The hint is in the error message - where did you put it? The way I've linked it, it has to be in the same directory as contact.html. Really you should have separate folders for the css files and the js files etc. So if you've put it in a js folder and assuming the js file is in the same directory as contact.html, change <script src="jquery.validate.js" type="text/javascript"></script> to <script src="js/jquery.validate.js" type="text/javascript"></script> The way you currently have your form coded, the validation won't work on the last name field. Where possible you want to keep all the field attributes, label fors etc the same to minimise errors - you've used last_name, lname and lastname. Just a suggestion... What do you mean by where did I put it? I have only html + css file nothing else. I guess I should have another file in my folder but I don't have it. jquery.validate.js Where do I get this file from? Ok, I will try to make it simple, with one attribute such as lname.
April 29, 201214 yr I'm assuming you've not included JQuery or the validation plugin in your code which you need to do first before the code will work. There's no point us giving you code snippets at present as it's obviously a way out of your understanding so I suggest you have a read of http://docs.jquery.com/Plugins/Validation to get you started. There's not going to be a quicker or easier way than using JQuery plus a plugin so you just need to get an understanding.
April 29, 201214 yr Author I'm assuming you've not included JQuery or the validation plugin in your code which you need to do first before the code will work. There's no point us giving you code snippets at present as it's obviously a way out of your understanding so I suggest you have a read of http://docs.jquery.com/Plugins/Validation to get you started. There's not going to be a quicker or easier way than using JQuery plus a plugin so you just need to get an understanding. Yes, you are right, I havent included JQuery or the validation plugin in my code. I've already read it few times but I still dont understand how it works, and how to include any jQuery plugin and stuff. I am so desperate, and it is so important for me, but I don't know how to use it. I have downloaded some kind of demo version and it has a lot of different examples, but I still don't understand how to make jquery plugin work for my contact form. Please give me some guidance, how to install it so I can start ahead will validation.. I have also found this page: http://docs.jquery.com/Downloading_jQuery but I dont know what I should download. Edited April 29, 201214 yr by design92
April 29, 201214 yr Google "how to use jquery validation plugin". There's a wealth of information out there just waiting for you
April 29, 201214 yr Author Google "how to use jquery validation plugin". There's a wealth of information out there just waiting for you I do understand, but can you please give me links to the files that are required to deal with jquery? I am confused because I dont know what files to download. I know, once I have files required I will start to play around with jquery. I just don't understand what files are required.. Please give me links or attach it to your post. It is not so big.. please.. I am also confused with the code once of you gave me. Basically I have 2 jquery files attached to my html document.. What is the difference between them? I cant understand it as well, I just guess one of them is online hosted, and one of them is local but they are the same files. Are they? <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.validate.js" type="text/javascript"></script> Edited April 29, 201214 yr by design92
April 29, 201214 yr You need both the files - all the files can be downloaded from http://bassistance.de/jquery-plugins/jquery-plugin-validation/ The one that is hosted online is a general jquery file, the other one which you need to download and link to in your page is specific to the validate functions. When you download it, you will then need to place it in the same directory as your contact.html file. Ok, I will try to make it simple, with one attribute such as lname. You'd be better off using lastname as that is what the script uses. You've got to read the code. lastname: "required", See - it says lastname not lname.
April 29, 201214 yr Author You need both the files - all the files can be downloaded from http://bassistance.de/jquery-plugins/jquery-plugin-validation/ The one that is hosted online is a general jquery file, the other one which you need to download and link to in your page is specific to the validate functions. When you download it, you will then need to place it in the same directory as your contact.html file. Ok, I will try to make it simple, with one attribute such as lname. You'd be better off using lastname as that is what the script uses. You've got to read the code. lastname: "required", See - it says lastname not lname. Ok, so just to make sure this is the file I need to start of with validating my form is that right? I am just confused before start, but once I've got started, I'll understand it. basically one file is online (might be downloaded if I want to / no difference) and one needs to be downloaded from jquery website, and linked to my contact form, and then I can start with validating yes? If yes - I hope I'll validate it quickly with a BIT of your help guys :) http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js
April 29, 201214 yr Go to this page. About half way down the page it says files, underneath files, it says download, click download. You'll get a zip file full of files and demos. Double click on the file to unzip it and hey presto you can use all the files and play around with the demo to see how the plug in works.
April 30, 201214 yr Author Hi all, How do I validate phone number by JavaScript so the field can have only 11 characters that are only numbers. non-numeric characters are not allowed to be entered in.
April 30, 201214 yr Hi all, How do I validate phone number by JavaScript so the field can have only 11 characters that are only numbers. non-numeric characters are not allowed to be entered in. Are you actually reading the documentation to learn how to use this, or are you just coming here every time you have a question that is already answered on the documentation? Everything you need to know is in the documentation. READ IT Validating Numbers Validating Max Length
May 1, 201214 yr Author If I would like to use jQuery, I would use it as now I understand it. Before starting with jQuery I had some code in JavaScript (normal one, not plugin), and found some tutorials so I have managed to do validate my form without using jQuery. Now, this is the question: I have mobile, and home fields. They are dependent. I have managed to make dependencies so if mobile is blank, home must be filled in, and the other way round. Now - I have also managed to make validation on these two fields so only numerical characters can be typed in. But my issue is, once form is submitted it accepts even 1 digits, as it should validate so there is 11 digits typed in. I have set max lenght of the field in field properties, but I DO NOT know how to set min length. Anyone can help? This is the code I have done but Dreamweaver pops up a syntax error on line 86 which is: else if (document.mobile.value.length >< 11) This is the full validation code for mobile and home: else if (mone == "" && mtwo == "") { document.getElementById('mobile').focus(); alert("Please fill at least one of the contact number."); return false; } else if (document.mobile.value.length >< 11) { alert("Telephone number has to be 11 digits."); return false; } What is wrong with it?
May 1, 201214 yr Author Hi guys, thats me again. I really need your help as I don't know how to combine 2 JavaScript codes into one and apply validation to the cell onclick event. Basically what I'm trying to achieve is only numbers can be typed in, and just 11 digits, so the minlength = 11, maxlength = 11. Now.. I've found some examples but I don't know how to merge them checking for numbers only <script type='text/javascript'> function isNumeric(elem, helperMsg){ var numericExpression = /^[0-9]+$/; if(elem.value.match(numericExpression)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } </script> <form> Numbers Only: <input type='text' id='numbers'/> <input type='button' onclick="isNumeric(document.getElementById('numbers'), 'Numbers Only Please')" value='Check Field' /> </form> restricting the length <script type='text/javascript'> function lengthRestriction(elem, min, max){ var uInput = elem.value; if(uInput.length >= min && uInput.length <= max){ return true; }else{ alert("Please enter between " +min+ " and " +max+ " characters"); elem.focus(); return false; } } </script> <form> Username(6-8 characters): <input type='text' id='restrict'/> <input type='button' onclick="lengthRestriction(document.getElementById('restrict'), 6, " value='Check Field' /> </form> Please help me guys to combine these two codes into one :-) I would really appreciate it. Edited May 1, 201214 yr by design92
Create an account or sign in to comment