Question

我是jQuery的新手，所以我的代码可能不是最简化的。我正在编写自己的表单验证脚本，这一切都运行良好。

但是为了减少CSS，我想在同一个div标签中显示每个表单输入的错误消息。因此，valid_prompt的div标记位于每个输入字段之后。

我目前遇到的问题是所有错误消息都显示在div标签的第一个外观中，这是预期的，但我需要一些方法将每个唯一的输入字段链接到显示错误的div。 / p>

表单输入示例

<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代码

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

Answer 1

您可以根据输入值不正确“移动”错误div。例如：

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

示例：http://jsfiddle.net/62A6a/

Jquery表单验证错误显示Div

1 个答案: