的JavaScript - 禁用提交按钮，直到3个字段不为空

Question

我有这几乎工作位：http://jsfiddle.net/HFzkW/ 我的代码如下所示：

<div id="cform-container"> 
<div class="alignleft" id="cform"> 
    <form action="<?php print site_url('/sent'); ?>" method="POST" > 
    <input type="hidden" name="Contact-Form" value="contact-form" /> 
     <div class="cform-row"> 
      <div class="alignleft cform-label"><label for="yn">Your Name</label><span id="star5">*</span></div> 
      <div class="alignright cform-ti"><input type="text" name="yn" id="yn" /><br /><span id="namespan" value="0"></span></div> 
      <div class="clearboth"></div> 
     </div> 
     <div class="cform-row"> 
      <div class="alignleft cform-label"><label for="cn">Company Name</label></div> 
      <div class="alignright cform-ti"><input type="text" name="cn" id="cn" /></div> 
      <div class="clearboth"></div> 
     </div> 
     <div class="cform-row"> 
      <div class="alignleft cform-label"><label for="em">Email Address</label><span id="star5">*</span></div> 
      <div class="alignright cform-ti"><input type="text" name="em" id="em" /><br /><span id="emailspan" value="0"></span></div> 
      <div class="clearboth"></div> 
     </div> 
     <div class="cform-row"> 
      <div class="alignleft cform-label"><label for="ph">Phone Number</label><span id="star5">*</span></div> 
      <div class="alignright cform-ti"><input type="text" name="ph" id="ph" /><br /><span id="phonespan" value="0"></span></div> 
      <div class="clearboth"></div> 
     </div> 
     <div class="cform-row"> 
      <div class="alignleft cform-label"><label for="ct">Industry</label></div> 
      <div class="alignright cform-ti"><input type="text" name="ct" id="ct" /></div> 
      <div class="clearboth"></div> 
     </div> 
     <div class="cform-row"> 
      <div class="alignleft cform-label"><label for="msg">Message</label></div> 
      <div class="alignright cform-ti"><textarea name="msg" id="msg"></textarea></div> 
      <div class="clearboth"></div> 
     </div> 
     <div id="cform-btn"><input type="submit" value="Submit" /></div> 
    </form> 
</div> 
<script id="source" language="javascript" type="text/javascript"> 
$(function(){ 
    $("input[type=submit]").attr("disabled", "disabled"); 
    $("#em").blur(function() 
      { 
      var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
      var emailaddress = $("#em").val(); 
      if(!emailReg.test(emailaddress) | emailaddress=="") { 
       $("#emailspan").html('<font color="#cc0000">Please enter valid Email address</font>'); 
      }else{ 
       $("#emailspan").html('<font color="#cc0000"></font>'); 
       } 
      }); 
    $("#yn").blur(function() 
      { 
      var namefield = $("#yn").val(); 
      if(namefield=="") { 
       $("#namespan").html('<font color="#cc0000">Please enter your name</font>'); 
      }else{ 
       $("#namespan").html('<font color="#cc0000"></font>'); 
       } 
      });         
    $("#ph").blur(function() 
      { 
      var phonefield = $("#ph").val(); 
      if(phonefield=="") { 
       $("#phonespan").html('<font color="#cc0000">Please enter your name</font>'); 
      }else{ 
       $("#phonespan").html('<font color="#cc0000"></font>'); 
       } 
      }); 
$('input, textarea').change(function(){ 
    var validation; 
    var email = $("#em").val(); 
    var name = $("#yn").val(); 
    var phone = $("#ph").val(); 

    if (email == "" && name == "" && phone == "") { 
    validation = false; 
    } else if (email != "" && name != "" && phone != "") { 
    alert ("variables"+email+name+phone); 
    validation = true; 
    } 
    if (validation = true) { 
    $("input[type=submit]").removeAttr("disabled"); 
    } else { 
    $("input[type=submit]").attr("disabled", "disabled"); 
    } 
}); 
}); 

我不能让它完全然而工作。当用户输入其中一个字段（例如您的姓名）时，提交按钮不再被禁用。

我想保持提交按钮被禁用，直到满足所有3个“必需”字段。我认为代码非常清晰 - 但它仍然无法正常工作。

此外，它在JSFiddle中工作，但不工作在我试图让它工作的Wordpress网站。任何想法检查，也将不胜感激。

Answer 1

尝试切换和ors。小心你的逻辑，并试图大声说出来，看看它是否有意义：

电子邮件是空白的，名字是空白和电话是空的，然后验证是错误的。你真正想要的是如果任何领域是空白的，验证是错误的。

if (email == "" || name == "" || phone == "") { 
validation = false; 
} else if (email != "" && name != "" && phone != "") { 
alert ("variables"+email+name+phone); 
validation = true; 
} 

另外，您在if语句中设置了validation=true。这将始终返回true。更改为：if (validation == true) {

Answer 2

从我所看到的，我会做的第一件事情来调试这个（代码是有点混淆，所以宁愿复制它，我会给你一些指导方针）。

代替

if(validation = true) 

尝试

if(validation) 

这是因为没有将检查不是假的，未定义或为空的任何参数。 对于电子邮件名称和电话可能也是这样。

Answer 3

所以基本上：

<form id="myForm" onfocus="submitButton("myForm);"> 
    <input type="text" name="name" placeholder="Name"> 
    <input type="text" name="email" placeholder="Email"> 
    <input type="text" name="phone" placeholder="Phone"> 
</form> 

而且

function submitButton(formID){ 

    var formObject = document.getElementById(formID); 

    var name = formObject.name.value; 
    var email = formObject.email.value; 
    var phone = formObject.phone.value; 

    if (name && email && phone) { 
    showSubmitButton(); 
    } else { 
    //keep the button hidden 
    } 
}