结合功能+禁用

我已经写了一些验证，它工作得很好，但我似乎无法结合所有三个功能（当调用所有函数和试图写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_-][email protected][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; 
     } 
    } 

});

来源

2014-01-11 Kirils Fostr

我不想深潜太辛苦，但也许你的正则表达式是导致该问题？ –

“当所有三个字段验证时，该按钮将被启用”。你在哪里启用按钮？我没有在代码中看到它。 – linstantnoodles

@NicholasHazel for循环会阻止事情发展。 – knrz

你可以做的是：

$("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。

来源

2014-01-11 02:24:12 knrz

感谢您的解决方案！ –

不客气！如果我回答了您的问题，请将我的答案标记为已接受。 – knrz

Okey，我标记了它，但是我只有11个声望，所以我不能投票你的问题:( –

从我的经验来看，使用这种技术进行验证是完全错误的，现在假设有人检查了你的页面，并删除了disabled属性！

最好的办法是，以验证在使用自己的algortihm提交（例如链中的所有验证功能，并返回false如果事情wasnt有效，否则链应返回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>

来源

2014-01-11 02:36:46 ProllyGeek

谢谢你的你的答案，我只是想从写我自己的代码学到一些东西，我知道有很多插件，但无论如何，谢谢你的答案！ –

结合功能+禁用

回答

相关问题