Jquery表单验证

Jquery Form Validation

本文关键字：验证 表单 Jquery      更新时间：2023-09-26

我在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>

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

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>

这是一把小提琴。

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

我认为您需要更改if-else中的语句，如果您正在尝试不同的东西，请告诉我——

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

Fiddle-http://jsfiddle.net/UcQhw/

嘿，我已经对你的代码进行了一些改进，它按照你想要的工作

JS代码：

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

JS Fiddle 上的现场演示

快乐编码：）

尝试以下代码：

 //$('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/

您必须交换if-else块中的语句。还可以使用$（this）来获取事件的来源。

实时演示

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

如果要检查所有文本字段都不能为空，则必须遍历所有输入。您应该指定class来获取特定的文本框，而不是获取页面上的所有文本框。您可以使用类选择器按类获取元素。

实时演示

$('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);
});
相关文章：