Question

我的代码验证了必要的数据，但我想根据AJAX的响应来管理提交。响应是一个布尔值数组，表示任何错误值，我想阻止表单提交。我在看this solution here,，但如果可能，我宁愿不使用插件。

$(document).ready( function () {
    console.log('ready');
    var submitButton = $('#tagProductForm');

    submitButton.on('submit', function (e) {
       e.preventDefault();

       var tags = ($('.tag').map(function () { return $(this).val(); })).get();

       $.ajax({
           type: "POST",
           url: "validateTag.php",
           data: 'jData=' + JSON.stringify(tags)            
       })
       .done(function( response ) {
           response = response.replace(/[[\]]/g,'');
           var responseArray = response.split(",");
           var size = responseArray.length;
           var valid = true;
           if(size != 0){                 
              for(var i = 0; i < size; ++i){
                 if(responseArray[i] == 'false'){
                    $('#tag' + i).attr('style','border:3px solid #FF0000');
                       // set valid to false
                 }
              }
              // if valid is false, prevent form from submitting
           }
        })
       .fail(function() {
           $('#response').html('error');
       })
   });
});

Answer 1

您可以使用：

$('#tagProductForm').submit(function() {
   var tags = ($('.tag').map(function () { return $(this).val(); })).get();

   $.ajax({
       type: "POST",
       url: "validateTag.php",
       data: 'jData=' + JSON.stringify(tags)            
   })
   .done(function( response ) {
       response = response.replace(/[[\]]/g,'');
       var responseArray = response.split(",");
       var valid = true;
       if(responseArray.length > 0){                 
          for(var i = 0; i < size; ++i){
             if(responseArray[i] == 'false'){
                $('#tag' + i).attr('style','border:3px solid #FF0000');
                // set valid to false
                valid = false;
             }
          }
          // if valid is false, prevent form from submitting
          if (!valid){
            return false;
          }
       }
    })
   .fail(function() {
       $('#response').html('error');
   })
});

这也是添加处理程序的一种更简洁的方式，因为您通常不提交按钮，而是提交表单。

Answer 2

你应该可以这样做：

if (!valid){
    return false;
}

假设您实际设置了循环，有效=假。

Answer 3

$(document).ready(function()
{   
   var isValid = false;
   $(.tags).blur(function(e) 
        {

           var tags = ($('.tag').map(function () { return $(this).val(); })).get();

               $.ajax({
                   type: "POST",
                   url: "validateTag.php",
                   data: 'jData=' + JSON.stringify(tags),
                   async: 'false'           
               })
               .done(function( response ) {
                   response = response.replace(/[[\]]/g,'');
                   var responseArray = response.split(",");
                   var size = responseArray.length;
                   isValid = true;
                   if(size != 0){                 
                      for(var i = 0; i < size; ++i){
                         if(responseArray[i] == 'false'){
                            $('#tag' + i).attr('style','border:3px solid #FF0000');
                               // set valid to false
                               isValid = false;
                         }
                      }
                   }
                })
               .fail(function() {
                   $('#response').html('error');
               })
           });
        });

        $('.submitSelector').click(function(e) 
        {
          e.preventDefault();
          if(isValid == true)
          {
            //Submit the form
                // DoWork / Redirect
          } 
        });
}});

好的，现在我们阻止默认（）给予一些空间。考虑到你想发布到服务器检查值，然后使用提交按钮取消表单提交，是非常棘手的。在您考虑提交理想之前，您需要单独验证这些值。检查值/验证模糊。如果值有效，则单击按钮以提交表单。

使用AJAX验证表单，防止表单提交条件

3 个答案: