Jquery 表单验证

Question

我一直在看一些关于 Stack 的帖子，试图让一个简单的表单验证工作，但它所做的只是禁用了我的提交按钮。一旦他们在输入字段中输入文本，它的意思就是删除禁用。

到目前为止

jQuery

$('input:submit').attr('disabled',true);

$('input').change(function(){
    if($('input').val() != ''){ 
        $('input:submit').attr('disabled',true);
    } else {
        $('input:submit').removeAttr('disabled');
});

HTML

<form action="send.php" method="post">
    <input id="name" name="name" type="text" required placeholder="Name"/>
    <input id="email" name="email" type="email" required placeholder="Enter a valid email address"/>
    <input name="submit" id="subscribe" type="submit" value="Subscribe for free"/>
</form>

Answer 1

您应该使用添加到所有必需字段的类来查找每个输入。如果用户更改了其中一个并且仍然没有输入，则该按钮将保持禁用状态：

jQuery:

   $('input.required').change(function(){
        if($(this).val() != ''){ 
             $(this).removeClass('required',true);
        }else{
             $(this).addClass('required',true);
        }

        //check the length to enable or disable submit
        if($(".required").length == 0){ 
             $('#subscribe').attr('disabled',false);
        }else{
             $('#subscribe').attr('disabled',true);
        }
    }); 

html:

 <form action="send.php" method="post">
            <input id="name" name="name" type="text" class="required" placeholder="Name" />
            <input id="email" name="email" type="email" class="required" placeholder="Enter a valid email address" />
            <input name="submit" id="subscribe" type="submit" value="Subscribe for free" />
</form>

Here is a fiddle.

但请记住，此解决方案仅适用于启用 javascript。

Answer 2

我认为您需要更改 if-else 中的陈述，如果您尝试除此之外的其他内容，请告诉我--

$('input:submit').attr('disabled',true);

        $('input').change(function(){
            if($('input').val() != ''){ 
                  $('input:submit').removeAttr('disabled');
            }else{
                $('input:submit').attr('disabled',true);
            }
        });

小提琴-http://jsfiddle.net/UcQhw/

Answer 3

嘿，我已经对您的代码进行了一些改进，并且它可以按您的预期工作

JS 代码：

 $('#subscribe').attr('disabled',true);

    $('input').change(function(){
        if($('input').val() != ''){ 

             $('#subscribe').attr('disabled',false);
        }else{
             //$('input:submit').removeAttr('disabled');
         $('#subscribe').attr('disabled',true);
        }
    });

LIVE DEMO 上 JS Fiddle

愉快的编码:)

Answer 4

试试下面的代码：

 //$('input:submit').attr('disabled',true);

    $('input').change(function(){
        if($('input').val() != ''){ alert(1);
             $('input:submit').attr('disabled',false);
        }else{alert(2);
             $('input:submit').attr('disabled', true);
        }
    });

代码：http://jsfiddle.net/WchJ9/

Answer 5

你必须在 if-else 块中交换语句。也可以使用 $(this) 来获取事件的来源。

Live Demo

  $('input:submit').attr('disabled', true);
   $('input').change(function () {
       if ($(this).val() !== '') {
           $('input:submit').attr('disabled', false);
       } else {
           $('input:submit').prop('disabled', true);
       }
   });

如果你想检查所有文本字段不能为空，那么你必须遍历所有输入。您应该分配 class 来获取特定的文本框，而不是全部显示在页面上。您可以使用class selector按类获取元素。

Live Demo

$('input:submit').attr('disabled', true);
$('.cls').change(function () {
   blankFields = $('.cls').filter(function () {
       return this.value == '';
   });
   if (blankFields.length === 0) $('input:submit').attr('disabled', false);
   else $('input:submit').prop('disabled', true);
});