Question

我已经写了一些验证，它工作得很好，但我似乎无法将所有三个函数组合在一起（当调用所有函数并尝试编写if语句或者可能是我只是误解了某些东西时），这将对$（' button：submit'）。attr（“disabled”，true）;当所有三个字段都有效时，该按钮将被启用，当该字段打开时将无法验证它将禁用按钮。

这是我的代码：

$(document).ready(function(){

    var form = $("#contact-us");
    var name = $("#name");
    var nameInfo = $("#nameInfo");
    var email = $("#email");
    var emailInfo = $("#emailInfo");
    var message = $("#message");
    var messageInfo = $("#messageInfo");

    name.blur(validateName);
    email.blur(validateEmail);
    message.blur(validateMessage);
    name.keyup(validateName);
    email.keyup(validateEmail);
    message.keyup(validateMessage);

    function validateEmail(){
        var a = $("#email").val();
        var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
        if(filter.test(a)){
            emailInfo.removeClass("error2");
            emailInfo.text("");
            return true;
        }
        else{
            emailInfo.addClass("error2");
            emailInfo.text("Wrong email");
            return false;
        }
    }

    function validateName(){
        if(name.val().length < 3) {
            nameInfo.addClass("error");
            nameInfo.text("Wrote more than 3 characters");
            return false;
        }
        else {
            nameInfo.removeClass("error");
            nameInfo.text("");
            return true;
        }
    }

    function validateMessage(){
        if(message.val().length < 10) {
            messageInfo.addClass("error3");
            messageInfo.text("Wrote more than 15 characters");
            return false;
        }
        else {          
            messageInfo.removeClass("error3");
            messageInfo.text("");
            return true;
        }
    }

});

Answer 1

你能做的是：

$("input").keyup(function () {
  var emailOk = validateEmail();
  var nameOk = validateName();
  var messageOk = validateMessage();

  if (emailOk && nameOk && messageOk) $("button.submit").addClass("show");
});

然后移除您的blur和keyup听众。

Here's a working fiddle

Answer 2

根据我的经验，使用此类技术验证是完全错误的，现在假设有人检查您的页面，并删除disabled属性!!

最好的方法是使用您自己的algortihm进行验证（例如，链接所有验证函数，如果某些内容无效则返回false，否则链应该返回true）

或者只是觉得免费验证插件，就像这样： http://parsleyjs.org/

简单如下：

<form id="demo-form" parsley-validate>
    <label for="fullname">Full Name * :</label>
    <input type="text" name="fullname" required />

    <label for="email">Email * :</label>
    <input type="email" name="email" parsley-trigger="change" required />

    <label for="website">Website :</label>
    <input type="text" name="website" parsley-trigger="change" parsley-type="url" />

    <label for="message">Message (20 chars min, 200 max) :</label>
    <textarea name="message" parsley-trigger="keyup" parsley-rangelength="[20,200]"></textarea>
</form>

结合功能+禁用

2 个答案: