0

我对 jQuery 相当陌生，所以我的代码可能不是最精简的。我正在尝试编写自己的表单验证脚本，一切正常。

但为了减少 CSS，我想在同一个 div 标签中显示每个表单输入的错误消息。所以valid_prompt的div标签被放置在每个输入字段之后。

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

表单输入示例

<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
4

1 回答 1

0

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

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

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

于 2013-03-30T23:58:55.750 回答