A simple jQuery form validation script

JqueryValidation

Jquery Problem Overview


I made a simple validation form using jQuery. It's working alright. The thing is I'm not satisfied with my code. Is there another way around to write my code with the same output result?

$(document).ready(function(){

$('.submit').click(function(){
	validateForm();   
});

function validateForm(){

    var nameReg = /^[A-Za-z]+$/;
    var numberReg =  /^[0-9]+$/;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
       
    var names = $('#nameInput').val();
    var company = $('#companyInput').val();
    var email = $('#emailInput').val();
    var telephone = $('#telInput').val();
    var message = $('#messageInput').val();
    
 	var inputVal = new Array(names, company, email, telephone, message);
 	
 	var inputMessage = new Array("name", "company", "email address", "telephone number", "message");

 	 $('.error').hide();
 		
		if(inputVal[0] == ""){
			$('#nameLabel').after('<span class="error"> Please enter your ' + inputMessage[0] + '</span>');
		} 
		else if(!nameReg.test(names)){
			$('#nameLabel').after('<span class="error"> Letters only</span>');
		}
		
		if(inputVal[1] == ""){
			$('#companyLabel').after('<span class="error"> Please enter your ' + inputMessage[1] + '</span>');
		}
		
		if(inputVal[2] == ""){
			$('#emailLabel').after('<span class="error"> Please enter your ' + inputMessage[2] + '</span>');
		} 
		else if(!emailReg.test(email)){
			$('#emailLabel').after('<span class="error"> Please enter a valid email address</span>');
		}
		
		if(inputVal[3] == ""){
			$('#telephoneLabel').after('<span class="error"> Please enter your ' + inputMessage[3] + '</span>');
		} 
		else if(!numberReg.test(telephone)){
			$('#telephoneLabel').after('<span class="error"> Numbers only</span>');
		}
		
		if(inputVal[4] == ""){
			$('#messageLabel').after('<span class="error"> Please enter your ' + inputMessage[4] + '</span>');
		}		
}	

});

Jquery Solutions


Solution 1 - Jquery

You can simply use the jQuery Validate plugin as follows.

jQuery:

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 5
            }
        }
    });

});

HTML:

<form id="myform">
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <input type="submit" />
</form>

DEMO: http://jsfiddle.net/xs5vrrso/

Options: http://jqueryvalidation.org/validate

Methods: http://jqueryvalidation.org/category/plugin/

Standard Rules: http://jqueryvalidation.org/category/methods/

Optional Rules available with the additional-methods.js file:

maxWords
minWords
rangeWords
letterswithbasicpunc
alphanumeric
lettersonly
nowhitespace
ziprange
zipcodeUS
integer
vinUS
dateITA
dateNL
time
time12h
phoneUS
phoneUK
mobileUK
phonesUK
postcodeUK
strippedminlength
email2 (optional TLD)
url2 (optional TLD)
creditcardtypes
ipv4
ipv6
pattern
require_from_group
skip_or_fill_minimum
accept
extension

Solution 2 - Jquery

you can use jquery validator for that but you need to add jquery.validate.js and jquery.form.js file for that. after including validator file define your validation something like this.

<script type="text/javascript">
$(document).ready(function(){
    $("#formID").validate({
	rules :{
		"data[User][name]" : {
			required : true
		}
	},
	messages :{
		"data[User][name]" : {
			required : 'Enter username'
		}
	}
    });
});
</script>

You can see required : true same there is many more property like for email you can define email : true for number number : true

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionjhedmView Question on Stackoverflow
Solution 1 - JquerySparkyView Answer on Stackoverflow
Solution 2 - JqueryDevang RathodView Answer on Stackoverflow