繁体   English   中英

重新制作jQuery表单验证

[英]Remaking jQuery form validation

我正在尝试通过(http://jorenrapini.com/blog/javascript/the-simple-quick-and-small-jquery-html-form-validation-solution)重新制作jQuery脚本。 该脚本正在检查是否填充了from,否则将显示错误消息。

我想做的是仅在填写两个表单输入字段之一时得到错误消息,如果没有一个则应该忽略它们。 表单字段被命名为“ firstinput”和“ secondinput”(您可以在代码中看到它们的ID)。

$(document).ready(function(){
    // Place ID's of all required fields here.
    required = ["firstinput", "secondinput"];
    // If using an ID other than #email or #error then replace it here
    email = $("#email");
    errornotice = $("#error");
    // The text to show up within a field when it is incorrect
    emptyerror = "Please fill out this field.";

    emailerror = "Please enter a valid e-mail.";

    $("#theform").submit(function(){    
        //Validate required fields
        for (i=0;i<required.length;i++) {
            var input = $('#'+required[i]);
            if ((input.val() == "") || (input.val() == emptyerror)) {
                input.addClass("needsfilled");
                input.val(emptyerror);
                errornotice.fadeIn(750);
            } else {
                input.removeClass("needsfilled");
            }
        }

        // Validate the e-mail.
        if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
            email.addClass("needsfilled");
            email.val(emailerror);
        }

        //if any inputs on the page have the class 'needsfilled' the form will not submit
        if ($(":input").hasClass("needsfilled")) {
            return false;
        } else {
            errornotice.hide();
            return true;
        }
    });

    // Clears any fields in the form when the user clicks on them
    $(":input").focus(function(){       
       if ($(this).hasClass("needsfilled") ) {
            $(this).val("");
            $(this).removeClass("needsfilled");
       }
    });
});

有人可以帮我解决一个问题,我真的很感激。 /花了很多时间解决这个问题的女孩:(

我会将您的for循环包装在一个条件中,该条件评估一个或另一个是否具有值。

if($("#field1").val() == "" && $("#field2").val() == ""){
//Ignore
}else{
//Do something
}

$(document).ready(function(){
    // Place ID's of all required fields here.
    required = ["firstinput", "secondinput"];
    // If using an ID other than #email or #error then replace it here
    email = $("#email");
    errornotice = $("#error");
    // The text to show up within a field when it is incorrect
    emptyerror = "Please fill out this field.";

    emailerror = "Please enter a valid e-mail.";

    $("#theform").submit(function(){    
        //Validate required fields
      if($("#firstinput").val() != "" || $("#secondinput").val() != "")
      {
        for (i=0;i<required.length;i++) {
            var input = $('#'+required[i]);
            if ((input.val() == "") || (input.val() == emptyerror)) {
                input.addClass("needsfilled");
                input.val(emptyerror);
                errornotice.fadeIn(750);
            } else {
                input.removeClass("needsfilled");
            }
        }
      }
        // Validate the e-mail.
        if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
            email.addClass("needsfilled");
            email.val(emailerror);
        }

        //if any inputs on the page have the class 'needsfilled' the form will not submit
        if ($(":input").hasClass("needsfilled")) {
            return false;
        } else {
            errornotice.hide();
            return true;
        }
    });

    // Clears any fields in the form when the user clicks on them
    $(":input").focus(function(){       
       if ($(this).hasClass("needsfilled") ) {
            $(this).val("");
            $(this).removeClass("needsfilled");
       }
    });
});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM