Jquery Form Validation Error Display Div

Question

I am fairly new to jQuery so my code probably is not the most streamlined. I am having a go at writing my own form validation script which is all working fine.

But in an effort to cut down on CSS I want to display error messages for each form input in the same div tag. So the div tag of valid_prompt is placed after every input field.

The problem I am currently having is all the error messages are being displayed in the first appearance of the div tag, which is expected, but I need some way of linking each unique input field to the div which displays the errors.

Form input Example

<input name="email1" id="email1" type="text" size="30"  maxlength="80"
value="<?php echo "$email1"; ?>" /><span id="valid_prompt"></span>
              <br/>
              <br/>
              <label><span class="reqfieldstar"> * </span>Confirm E-mail Address:</label>

                <input name="email2" id="email2" type="text" size="30"  maxlength="40" value="<?php echo "$email2"; ?>" /><span id="valid_prompt"></span>

Jquery Code

var form = $("#SignupForm"); // Id of Form

var email = $("#email1"); // Email Address ID
var email_compare = $("#email2"); // Compare Email Address ID 

var valid_prompt = $("#valid_prompt");


var lettersReg = /^([a-zA-Z,-]|\s)*$/;
var emailReg = /^(\S+@\S+(\.\S+)*\.(\S{2,4}))?$/i;



email.keyup(validateEmail);
email_compare.keyup(validateEmail_Compare);
firstname.keyup(validateFirstname);
surname.keyup(validateSurname);


email.blur(validateEmail);
email_compare.blur(validateEmail_Compare);
firstname.blur(validateFirstname);
surname.blur(validateSurname);




form.submit(function() {
    if (validateEmail() && validateEmail_Compare() && validateFirstname() && validateSurname()) {
        return true;
    } else {

        return false;

    }

});



function validateEmail() {
    if (email.val().length == 0) {
        email.addClass("error");
        valid_prompt.removeClass("correct");
        valid_prompt.text("You Must Enter Your E-mail Address");
        valid_prompt.removeClass("correct");
        valid_prompt.addClass("error");

        return false;
    } else {
        if (!emailReg.test(email.val())) {
            email.addClass("error");
            valid_prompt.removeClass("correct");
            valid_prompt.text("Please Enter a Valid E-mail Address");
            valid_prompt.removeClass("correct");
            valid_prompt.addClass("error");

            return false;
        } else {
            email.removeClass("error");
            valid_prompt.text("");
            valid_prompt.addClass("correct");
            valid_prompt.removeClass("error");

            return true;
        }
    }
} // Email Function End

function validateEmail_Compare() {
    if (email_compare.val().length == 0) {
        email_compare.addClass("error");
        valid_prompt.removeClass("correct");
        valid_prompt.text("You Must Confirm Your E-mail Address");
        valid_prompt.removeClass("correct");
        valid_prompt.addClass("error");

        return false;
    } else {
        if (!emailReg.test(email_compare.val())) {
            email_compare.addClass("error");
            valid_prompt.removeClass("correct");
            valid_prompt.text("Please Enter a Valid E-mail Address");
            valid_prompt.removeClass("correct");
            valid_prompt.addClass("error");

            return false;
        } else {
            if (email.val() != email_compare.val()) {
                email_compare.addClass("error");
                valid_prompt.removeClass("correct");
                valid_prompt.text("Your E-mail Addresses Do Not Match");
                valid_prompt.removeClass("correct");
                valid_prompt.addClass("error");

                return false;
            } else {
                email_compare.removeClass("error");
                valid_prompt.text("");
                valid_prompt.addClass("correct");
                valid_prompt.removeClass("error");

                return true;
            }
        }
    }
} // Email Compare Function End

@Sparky no, this time it is different problem. – dfsq Mar 30 '13 at 21:45 — dfsq, Mar 30 '13 at 21:45

mn. · Answer 1 · 2013-03-31T22:41:51.427

0

You can "move around" an error div, based on whatever input values are incorrect. eg:

$("input[type=text]").click(function(){
   $("#errorDiv").insertAfter($(this)); 
});

example: http://jsfiddle.net/62A6a/

edited Mar 31 '13 at 22:41

answered Mar 30 '13 at 23:58

mn.

796
6
12

Hi this will just work exactly the same, I want to use the same div of valid_prompt positioned at the end of every input field. So for example, the errors messages for the email input field will be displayed at the end of the email input field, then when you move down to the nest input field of email_compare the error messages for that input field go at the end of it. I don't know if this is possible or not, I just want to have to create multiple div tags for each input field. – user2224798 Mar 31 '13 at 17:06

Jquery Form Validation Error Display Div

1 Answers1