Javascript - 禁用提交按钮，直到3个字段不为空 [英] Javascript - Disable submit button until 3 fields are not empty

问题描述

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

I have this almost working bit: http://jsfiddle.net/HFzkW/ My code looks like this:

<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");
    }
});
});

但是我无法完全使用它。当用户输入其中一个字段（例如您的姓名）时，提交按钮不再被禁用。

I cannot get it to work completely however. When the user enters one of the fields to (such as Your Name) the Submit button is no longer disabled.

我想保持提交按钮被禁用，直到所有3满足'必需'字段。我认为代码非常清晰 - 但它仍然不起作用。

I want to keep the Submit button disabled until all 3 of the 'required' fields are met. I thought the code was pretty clear for that - but it still isn't working.

另外，它在JSFiddle中可用，但不适用于Wordpress站点我试图让它工作。任何想法检查，也将不胜感激。

Also, it works here in JSFiddle, but isn't working on the Wordpress site where I'm trying to get it working. Any ideas for checking that would also be appreciated.

推荐答案

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

Try switching ands to ors. Be careful with your logic and try to say it out loud to see if it makes sense:

电子邮件是空白的，名称为空，电话为空，则验证为false。你真正想要的是如果任何字段为空，验证是错误的。

Email is blank and name is blank and phone is blank then validation is false. What you actually wanted was to say if any field is blank, validation is false.

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

另外，您正在设置 validation = true code>在你的if语句中。这将始终返回true。更改为： if（validation == true）{

Also, you are setting validation=true in your if statement. This will always return true. Change to this: if (validation == true) {

这篇关于Javascript - 禁用提交按钮，直到3个字段不为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！