Question

如果在表单中填写所有必填字段，我该如何更改按钮的值？

THE SCRIPT

$('#myButton').click(function(){
    $(this).val('We are logging you in...');
});

表格

<form method='post' action="dashboard.php" id="login">
    <input id="username" type="email" name="userName" placeholder="Email address">            
    <input id="password" type="password" name="password" placeholder="Password">
</form>

<input type="submit" id="myButton" name='logIn' class="button" value="Login">

这是我可以努力的小提琴：http://jsfiddle.net/stan255/a5k25/

如何使用jQuery实现此目标？

Answer 1

试试这个：

 $('#myButton').click(function(){
var allValidated = true;
$('#login input').each(function(){
if($(this).val()=="")
      allValidated = false;
})
if(allValidated)
  $(this).val('We are logging you in...');
});

<强> Working Demo

Answer 2

尝试，

$('#myButton').click(function(){
    var cache = $('input:not([type="submit"])');
    var condition = cache.filter(function(){ return $(this).val() !== ""; }).length === cache.length;
    if(condition){ $(this).val('We are logging you in...'); }
    else { $(this).val('We are not gonna log you in...'); }
});

DEMO

Answer 3

使用您的小提琴代码：假设您使用电子邮件作为第一个输入。

$('#myButton').click(function(){
    var email = $("#username").val();
    var password = $("#password").val();
    if(validateEmail(email) && password!= ''){
     $(this).val('We are logging you in...');
    } else {
      //Your error msg here
      return false;
    }

});

function validateEmail(email){
    var emailReg = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
    var valid = emailReg.test(email);

    if(!valid) {
        return false;
    } else {
        return true;
    }
}

Answer 4

您可以使用 blur 事件处理程序

来完成此操作

1）收集除sumit按钮之外的所有文本框字段。

var allInps = $('input').not('input[type="submit"]');

2）现在附上 blur 事件处理程序以执行以下操作

3）创建一个boolean变量（ch），检查是否填写了所有必填字段，然后迭代每个textbox元素并检查其< em>值的长度并根据它更改boolean变量（ch）的值。

allInps.on('blur', function () {
    var ch = false;
    $.each(allInps, function (i, v) {
        if ($(v).val().length !== 0) 
            ch = true;
        else 
            ch = false;
    });
    if (ch)  
       $('#myButton').val('NOW U CAN LOGIN');
});

JSFiddle

仅当填写了所有必填字段时，如何更改按钮的值？

4 个答案:

DEMO