jquery 填写表单中的多个字段时如何保持提交按钮禁用

rqqzpn5f 于 2023-03-17 发布在 jQuery

关注(0)|答案(3)|浏览(114)

我有一个有多个字段的表单，提交按钮应该保持禁用状态，直到所有必填字段都填写完毕。我的问题是，当我开始在第一个字段中键入内容时，该按钮变为活动状态。
我试过不同的方法，从不同的问题，我不能让它工作。
下面是Fiddle，代码如下：

<form>
<div class="row">
  <label for="realname">Name<span class="required">*</span></label>
  <input type="text" name="realname" id="realname" required/>
  </div>

  <div class="row">
    <label for="company">Company</label>
    <input type="text" name="company" id="company"/>
  </div>

  <div class="row">
    <label for="email">Email<span class="required">*</span></label>
    <input type="email" name="email" id="email" required/>
  </div>

  <div class="row">
    <label for="phone">Phone<span class="required">*</span></label>
    <input type="tel" name="phone" id="phone" required/>
  </div>

  <div class="row">
    <input type="submit" value="SUBMIT">
  </div>
  </form>

$(document).ready(function(){

    var allInput = $('input:required');

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

    submit.prop('disabled', true);
    $('form').bind('submit',function(e){e.preventDefault();});

    $(allInput).on('input change', function() {
        $.each(allInput,function(){
            if($(this).val() == ""){
                console.log('nope');
            } else {
                submit.prop('disabled', false);
                $('form').unbind('submit');
            }
        });
    });
});

https://jsfiddle.net/cdpritch/vqcemxh6/
谢谢！

jquery

来源：https://stackoverflow.com/questions/75724760/how-to-keep-submit-button-disabled-when-filling-out-multiple-fields-in-form

3条答案

按热度按时间

vbkedwbf1#

当一个值不是空字符串时，您将启用按钮，我将以相反的方式执行此操作，启用提交按钮，如果一个项为空，则禁用按钮：

$(document).ready(function(){

    var allInput = $('input:required');

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

    submit.prop('disabled', true);
    $('.fancy-form').bind('submit',function(e){e.preventDefault();});

    $(allInput).on('input change', function() {
    submit.prop('disabled', false);
        $('.fancy-form').unbind('submit');
        $.each(allInput,function(){
            if($(this).val() == ""){
                submit.prop('disabled', true);
                $('.fancy-form').bind('submit',function(e){e.preventDefault();});
            }
        });
    });
});

赞(0）回复(0）举报 2023-03-17

yxyvkwin2#

你的if块不对。if块说如果这些必填字段中有一个不为空，那么就启用按钮。你需要检查它们是否都为空。

$(allInput).on('change', function() {
    counterGood=0;
    $.each(allInput,function(){
        if($(this).val() == ""){
            console.log('nope');
        } else {
            counterGood++;
        }
    });

    //check count
    if(counterGood == allInput.length){
        submit.prop('disabled', false);
        $('.fancy-form').unbind('submit');
    }else{
        submit.prop('disabled', true);
    }
});

赞(0）回复(0）举报 2023-03-17

u5rb5r593#

代码已经过更改，以更好地使用Jquery样式的代码，并涵盖不同的用例，如删除已经输入的值。

$(function() {
  const selector = 'input[required]';
  const allInput = $(selector);
  const submit = $('input[type="submit"]');

  $(document).on('change', selector, function() {
    const counterGood = allInput.filter(function() {
      return this.value !== '';
    }).length;
    
    submit.prop('disabled', counterGood !== allInput.length);
  });
  
  $('form').on('submit', function(e) {
    if (submit.prop('disabled')) {
      console.log('nope');
      e.preventDefault();
      return;
    }
    
    console.log('submit is Ok');
  });

  allInput.eq(0).trigger('change');
});

赞(0）回复(0）举报 2023-03-17

我来回答

jquery 填写表单中的多个字段时如何保持提交按钮禁用

3条答案

相关问题

热门标签

最新问答