如果表单域为空，请阻止使用ajax提交表单

Im对简单表单有一些麻烦。如果字段为空，我似乎无法阻止表单提交。有没有简单的方法来检查字段是否为空，然后阻止提交表单？如果表单域为空，请阻止使用ajax提交表单

这里是我的HTML表单：

<form method="post" name="simpleForm" id="simpleForm" action="handler.php"> 
<fieldset> 
    <legend>Info</legend> 
      <p><label for="name">Name</label><br> 
      <input id="name" name="name" class="text" /></p> 
      <p><label for="email">Email</label><br> 
      <input id="email" name="email" class="text" /></p> 

    <legend>Questions</legend> 
      <p><label for="qs_1">Question 1</label><br> 
      <input id="qs_1" name="qs_1" class="text" /></p> 
      <p><label for="qs_2">Question 2</label><br> 
      <input id="qs_2" name="qs_2" class="text" /></p> 
      <p><label for="qs_3">Question 3</label><br> 
      <input id="qs_3" name="qs_3" class="text" /></p> 

</fieldset>    

<p><input type="submit" name="submit" value="Send" id="sub_btn" /></p> 
</form>

这里是我的javascript：

$("form#simpleForm").submit(function() { 

     var name  = $('#name').attr('value'); 
     var email = $('#email').attr('value'); 
     var qs_1  = $('#qs_1').attr('value'); 
     var qs_2  = $('#qs_2').attr('value'); 
     var qs_3  = $('#qs_3').attr('value'); 



      $.ajax({ 
       type: "POST", 
       url: "handler.php", 
       data: "name="+ name +"& email="+ email +"& qs_1="+ qs_1 +"& qs_2="+ qs_2 +"& qs_3="+ qs_3, 
       success: function(){ 
        $('form#simpleForm').hide(function(){$('div.success').fadeIn();}); 

       } 
      }); 
     return false; 
});

来源

2011-10-27 Garreth 00

不使用'$（ '＃名称'）ATTR（ '值'）'但使用'$（ '＃名称'）VAL（）' – JellyBelly

而不是使用'.attr（ 'value'）'，而是使用'.val（）'。提高跨浏览器兼容性。 – GregL

使用e.preventDefault()取消表单提交。如果您不想发送AJAX呼叫，请添加条件检查。此外，使用.val()而不是.attr("value")。

$("form#simpleForm").submit(function(ev) { 
    ev.preventDefault(); 

    var name  = $('#name').val(); 
    var email = $('#email').val(); 
    var qs_1  = $('#qs_1').val(); 
    var qs_2  = $('#qs_2').val(); 
    var qs_3  = $('#qs_3').val(); 

    //This condition will only be true if each value is not an empty string 
    if(name && email && qs_1 && qs_2 && qs_3){ 
     $.ajax({ 
      type: "POST", 
      url: "handler.php", 
      data: "name="+ name +"& email="+ email +"& qs_1="+ qs_1 +"& qs_2="+ qs_2 +"& qs_3="+ qs_3, 
      success: function(){ 
       $('form#simpleForm').hide(function(){$('div.success').fadeIn();}); 

      } 
     }); 
    } 
    return false; //IE 
});

来源

2011-10-27 10:27:44

preventDefault（）在IE中不起作用，对于IE，使用event.cancelBubble = true; – Ankit

'return false;'，提问者已经有了，应该做同样的事情。问题是如果任何/所有字段为空，如何防止提交。 – GregL

@GregL Preventdefault是一个额外的。我在回答中提出了3个改变。 –

只想着要赚Ajax请求之前，如果检查：

if(name != '' && email != '' ...) 
{ 
//send request is true 
$.ajax({ 
       type: "POST", 
       url: "handler.php", 
       data: "name="+ name +"& email="+ email +"& qs_1="+ qs_1 +"& qs_2="+ qs_2 +"& qs_3="+ qs_3, 
       success: function(){ 
        $('form#simpleForm').hide(function(){$('div.success').fadeIn();}); 

       } 
      }); 

} 

else{ 
return false; 
}

来源

2011-10-27 10:28:33 Ankit

不错的尝试，但请注意在其他答案中提出的观点 - 无论if条件是否通过，您都需要返回false，否则表单将进行正常提交，这可能不是您想要的。 – GregL

在一般意义上，如果你返回从提交处理虚假它会阻止形式在标准提交（非Ajax ）的方式，但我看到你已经在做这个 - 如果你想通过ajax提交它，或者它会使ajax调用和正常提交。

因此，所有你需要为你的验证是把一个if测试，只有当验证通过使$.ajax()电话：

if (name != "" && etc...) { 
    $.ajax({ /* your existing ajax code here */ }); 
}

编辑：您还可以测试，有一个单一的jQuery没有空白领域选择：。

if ($("#simpleform :text[value='']").length === 0) { 
    $.ajax({ /* your existing ajax code here */ }); 
}

来源

2011-10-27 10:31:14 nnnnnn

如果表单域为空，请阻止使用ajax提交表单

回答

相关问题