如何避免提交没有价值的表格?

时间:2015-12-02 08:21:10

标签: jquery html ajax

我正在使用以下代码将表格中的一些数据发送到带有AJAX的PHP脚本。我需要一个快速的答案我已经没时间了,如果输入的形式=“”,我需要一个非常快速和直接的方法来不发送数据,这意味着如果用户只是点击保存空白表格。

<script type="text/javascript">
$("document").ready(function(){
  $(".ajaxcourse1").submit(function(){
    var data = {
      "action": "test"
    };
    data = $(this).serialize() + "&" + $.param(data);
    $.ajax({
      type: "POST",
      dataType: "json",
      url: "course1.php", 
      data: data,
      success: function(data) {
        $("#editcourse1").html(
          data["course1"] 
        );


  }
});
return false;
 });
});
</script>

6 个答案:

答案 0 :(得分:1)

您需要先验证表单。您使用Parsley之类的验证库,或者通过检查表单中的字段是否为空/无效来手动执行。

$(".ajaxcourse1").submit(function(){
    var form_validates = $('.ajaxcourse1').parsley().isValid();

    if(!form_validates) { return false } // this will stop the form from sending your ajax call. 

    ... your code ...
}

答案 1 :(得分:0)

if ($('#whateveryourinputidis').val()) {
   // send data  
   $.ajax(parameters);
} else {
   // don't send data, perhaps alert
}

答案 2 :(得分:0)

我假设您通过单击按钮提交表单,在这种情况下,您需要在表单提交之前检查值,并在有空字段时阻止它:

<input type="submit" value="Login" />

$(':submit').click(function(e) {
    if ($("#some_field").val().length == 0) {
                    e.preventDefault();
     }else{
       //ajax call
     }
});

答案 3 :(得分:0)

可以尝试这个

var error = false;
$(this).find('input').each(function(key, value){ //this -> your form
   if(!value)
      error = true;
});
if(error)
   alert('Input data missing baby !!'); // or your logic

答案 4 :(得分:0)

你也可以尝试这个

$(".ajaxcourse1").submit(function(e){
    var data = {
      "action": "test"
    };

    var flag = true; 
    // validate your inputs here, 
    // this is just a sample validation

    $(this).find("input").each(function (i, row){
        if($(row).val() == ""){
           flag = false;
        }
    }); 

    if(flag === false){
       return false; // to cancel the form submit
    }else{

       data = $(this).serialize() + "&" + $.param(data);
       $.ajax({
         type: "POST",
        dataType: "json",
        url: "/course1.php", 
        data: data,
        success: function(data) {
          $("#editcourse1").html(
            data["course1"] 
          );
        },
        error: function (data) {
          console.warn(data);
        },
        complete: function () {
          console.log('request has been completed, either it succeeded or it failed.)
        }
      });
  }

答案 5 :(得分:0)

您可以在提交表单时自行检查值,如果所有值都不正常,则中止提交。但要解决此问题并为您提供更多灵活性,您可以使用jquery validation plugin