Question

<span class="button-contac-send">Send</span>

并在jQuery中：

$('.button-contac-send').click(function(event) {
    //ajax
...

如果表单字段为空，如何禁用此元素（.button-contac-send）？我需要验证。

编辑：

形式：

<form action="/contact/" method="POST" id="form">
        <div class="col-lg-3 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1 ">
          <input type="text" id="name" name="name" class="form-control" placeholder="Name">
        </div>
        <br><br>

        <div class="col-lg-3 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1 ">
          <input type="text" id="email" name="email" class="form-control" placeholder="E-Mail">
        </div>

        <br><br>
        <div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1">
          <textarea name="msg" id="msg" class="form-control" rows="4" placeholder="Message"></textarea>
        </div>
        </form>

Answer 1

尝试

   var formElementsHasValue=false;

   $('form').find('input, select, textarea').each(function(i,o){
      if(this.value!=="")
      {
       formElementsHasValue=true;
      }
   });

   if(!formElementsHasValue)
   {
    $('.button-contac-send').addClass('disabled'); //disable via css
   }

Answer 2

我认为您正在寻找的是迭代您的表单字段并对其进行一些验证。

只需获取所有值并检查它们是否为空。

如果其中一个必填字段为空，请不要执行ajax提交，只显示错误消息。

如果你发布整个HTML表单，我可以给你一个更具体的例子。

史蒂夫

//编辑

因为你已经在使用jquery：

<form action="/contact/" method="POST" id="form">
<div class="col-lg-3 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1 ">
    <input type="text" id="name" name="name" class="form-control" placeholder="Name">
</div>
<br>
<br>
<div class="col-lg-3 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1 ">
    <input type="text" id="email" name="email" class="form-control" placeholder="E-Mail">
</div>
<br>
<br>
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1">
    <textarea name="msg" id="msg" class="form-control" rows="4" placeholder="Message"></textarea>
</div>
<div class='.button-contac-send'>submit</div>

$(document).ready(function () {
    $('.button-contac-send').click(function () {
        $('.form-control').each(function (index, value) {
            if ($(value).val() == "") {
                alert('Empty at index ' + index);
            }
        });
    });
});

如果我的表单字段为空，如何禁用此元素（`.button-contac-send`）？

2 个答案: