Jquery Form Validation Script

Question

I wanted to write my own JQUERY form validation script instead of using the JQUERY validate plugin. I am still relatively new to JQUERY so my script may not be the most streamline.

I have written the following script which doesn't seem to work at all, but from what I have researched and read it all seems ok.

So if anyone has the time to glance a professional eye on the script below, to see if I am doing something stupid

Cheers

$(document).ready(function(){

var form = $("#SignupForm");
var email1 = $("#email1");
var email2 = $("#email2");
var firstname = $("#firstname");
var surname = $("#surname");


var firstname_valid_prompt = $("#firstname_valid_prompt");
var firstname_correct_image = $("#firstname_correct_image");
var surname_valid_prompt = $("#surname_valid_prompt");
var surname_correct_image = $("#surname_correct_image");
var email1_valid_prompt = $("#email1_valid_prompt");
var email1_correct_image = $("#email1_correct_image");
var email2_valid_prompt = $("#email2_valid_prompt");
var email2_correct_image = $("#email2_correct_image");



var lettersReg = /^([a-zA-Z,-]|\s)*$/;
var emailReg = /^(\S+@\S+(\.\S+)*\.(\S{2,4}))?$/i.test(f.val()) && !/[\(\)\<\>\,\;\:\\\"\[\]]/;



email1.keyup(validateEmail1);
email2.keyup(validateEmail2);
firstname.keyup(validateFirstname);
surname.keyup(validateSurname);




form.submit(function(){
    if (validateEmail1() & validateEmail2() & validateFirstname() & validateSurname()){
    return true ;
    }       
    else {
    return false;   
    }

});

function validateEmail1(){
    if (email1.val().length == 0){
    email1.addClass("error");
    email1_valid_prompt.removeClass("correct");
    email1_valid_prompt.text("You Must Enter Your E-mail Address");
    email1_correct_image.removeClass("correct");
    email1_valid_prompt.addClass("error");
    return false;   
    } 
    else{
        if(!emailReg.test(email1.val())) {
        email1.addClass("error");
        email1_valid_prompt.removeClass("correct");
        email1_valid_prompt.text("Please Enter a Valid E-mail Address");
        email1_correct_image.removeClass("correct");
        email1_valid_prompt.addClass("error");
        return false;
        }
        else {
        email1.removeClass("error");    
        email1_valid_prompt.text("");
        email1_correct_image.addClass("correct");
        email1_valid_prompt.removeClass("error");
        return true;
        }
    }
} // Email Function End

function validateEmail2(){
    if (email2.val().length == 0){
    email2.addClass("error");
    email2_valid_prompt.removeClass("correct");
    email2_valid_prompt.text("You Must Confirm Your E-mail Address");
    email2_correct_image.removeClass("correct");
    email2_valid_prompt.addClass("error");
    return false;   
    } 
    else{
        if(!emailReg.test(email2.val())) {
        email2.addClass("error");
        email2_valid_prompt.removeClass("correct");
        email2_valid_prompt.text("Please Enter a Valid E-mail Address");
        email2_correct_image.removeClass("correct");
        email2_valid_prompt.addClass("error");
        return false;   
        }
        else{
            if($("#email1").val() != $("#email2").val()){
            email2.addClass("error");
            email2_valid_prompt.removeClass("correct");
            email2_valid_prompt.text("Your E-mail Addresses Do Not Match");
            email2_correct_image.removeClass("correct");
            email2_valid_prompt.addClass("error");
            return false;   
            }
            else {
            email2.removeClass("error");    
            email2_valid_prompt.text("");
            email2_correct_image.addClass("correct");
            email2_valid_prompt.removeClass("error");
            return true;
            }
            }
        }
} // Email 2 Function End



function validateFirstname(){
    if (firstname.val().length == 0){
    firstname.addClass("error");
    firstname_valid_prompt.removeClass("correct");
    firstname_valid_prompt.text("You Must Enter Your Firstname");
    firstname_correct_image.removeClass("correct");
    firstname_valid_prompt.addClass("error");
    return false;   
    } 
    else{
         if(!lettersReg.test(firstname.val())) {
        firstname.addClass("error");
        firstname_valid_prompt.removeClass("correct");
        firstname_valid_prompt.text("Please Only Use Letters");
        firstname_correct_image.removeClass("correct");
        firstname_valid_prompt.addClass("error");
        return false;   
        }
        else {
        firstname.removeClass("error"); 
        firstname_valid_prompt.text("");
        firstname_correct_image.addClass("correct");
        firstname_valid_prompt.removeClass("error");
        return true;
        }
        }
} // Firstname Function End

function validateSurname(){
    if (surname.val().length == 0){
    surname.addClass("error");
    surname_valid_prompt.removeClass("correct");
    surname_valid_prompt.text("You Must Enter Your Surname");
    surname_correct_image.removeClass("correct");
    surname_valid_prompt.addClass("error");
    return false;   
    } 
    else{
        if(!lettersReg.test(surname.val())) {
        surname.addClass("error");
        surname_valid_prompt.removeClass("correct");
        surname_valid_prompt.text("Please Only Use Letters");
        surname_correct_image.removeClass("correct");
        surname_valid_prompt.addClass("error");
        return false;   
        }
        else {
        surname.removeClass("error");   
        surname_valid_prompt.text("");
        surname_correct_image.addClass("correct");
        surname_valid_prompt.removeClass("error");
        return true;
        }
    }
} // Surname Function End

});

First of all, why reinvent the wheel? [jQuery Validate](http://bassistance.de/jquery-plugins/jquery-plugin-validation/) is a solid, mature solution. Secondly, what exactly, doesn't work? Do you see any errors in the console? — jrummell, Mar 29 '13 at 15:21
Scalable form validation is no simple task. I commend you for wanting to learn, however, since you're new to jQuery, maybe you should rely on a [solidly proven form validation plugin](http://bassistance.de/jquery-plugins/jquery-plugin-validation/) instead. — Sparky, Mar 29 '13 at 18:47

score 2 · Accepted Answer · edited May 23 '17 at 10:25

You have 2 errors. Fix them and your script will work.

Error #1 Code:

if (validateEmail1() & validateEmail2() & validateFirstname() & validateSurname()) {

must be

if (validateEmail1() && validateEmail2() && validateFirstname() && validateSurname()) {

Read about the difference between logical && and bitwise & operators here.

Error #2. Email regexp is not correct and should be just:

var emailReg = /^(\S+@\S+(\.\S+)*\.(\S{2,4}))?$/i;

Working demo: http://jsfiddle.net/76HYV/

score 0 · Answer 2 · answered Mar 31 '13 at 23:23

Aside from dfsq's answer, a much more efficient way of showing error messages in forms is done through jQuery objects :)

//create an "error message" div, and insert it after the form field
$("<div/>",{
    class: 'errorDiv',
    id: 'errorDiv1'
}).insertAfter("#field1");
$("#errorDiv1").html("an error message");

this way, you dont need to add/remove classes for every field :)

example: http://jsfiddle.net/9BsFH/1/

Jquery Form Validation Script

2 Answers2

Related