Ios設備，「必填」字段，並感謝您的消息

Question

我想合併兩個JavaScripts。第一個是使用ajax發送消息，第二個是提醒用戶有關聯繫表單中的必填字段。

我想合併這兩個，也許與一個IF語句，所以首先檢查所有字段，然後發送消息。

1與阿賈克斯的JavaScript：

$('document').ready(function() { 
    $('form#contact-form').submit(function() { 
     var form = $(this); 
     var post_data = form.serialize(); //Serialized the form data for process.php 
     $('#loader').html('<img src="../spinner.gif" /> Please Wait...'); 

     form.fadeOut(500, function() { 
      form.html("<h3>Thank you.").fadeIn(); 
      $('#loader').html(''); 
     }); 

     // Normally would use this 
     $.ajax({ 
      type: 'POST', 
      url: 'process.php', // Your form script 
      data: post_data, 
      success: function(msg) { 
       form.fadeOut(500, function(){ 
        form.html(msg).fadeIn(); 
       }); 
      } 
     }); 

     return false; 
    }); 
}); 

2警報的JavaScript：

$('document').ready(function() { 
    $('form#contact-form').submit(function(e) { 

     var ref = $(this).find("[required]"); 

     $(ref).each(function(){ 
      if ($(this).val() == '') 
      { 
       alert("Required field should not be blank."); 

       $(this).focus(); 

       e.preventDefault(); 
       return false; 
      } 
     }); return true; 
    }); 
}); 

從答案下面我創建了下面的代碼。

我做了這個鏈接，如果有人想幫助。警報正常工作，但代碼不會停止。它繼續加載其餘代碼。

https://jsfiddle.net/L8huq1t1/

Answer 1

您可以通過下面的代碼做到這一點。

function checkValidation() { 
     var ref = $(this).find("[required]"); 
     $(ref).each(function(){ 
      if ($(this).val() == '') 
      { 
       alert("Required field should not be blank."); 
       $(this).focus(); 
       //e.preventDefault(); 
       return false; 
      } 
     }); 
     return true; 
    } 
$('document').ready(function() { 
    $('form#contact-form').submit(function() { 
     if(!checkValidation()) { 
      return false; 
     } 

     var form = $(this); 
     var post_data = form.serialize(); //Serialized the form data for process.php 
     $('#loader').html('<img src="../spinner.gif" /> Please Wait...'); 

     form.fadeOut(500, function() { 
      form.html("<h3>Thank you.").fadeIn(); 
      $('#loader').html(''); 
     }); 

     // Normally would use this 
     $.ajax({ 
      type: 'POST', 
      url: 'process.php', // Your form script 
      data: post_data, 
      success: function(msg) { 
       form.fadeOut(500, function(){ 
        form.html(msg).fadeIn(); 
       }); 
      } 
     }); 
     return false; 
    }); 
}); 

但我給你一個建議，使用jquery.validate插件這是更好的選擇。但是如果你仍然想這樣做，那麼這也是可以的。

Answer 2

你可以使用jQuery驗證插件，它有一個表單提交處理器，你可以把你的AJAX。 Link to the plugin。

您的代碼應該是這個樣子：

$('#contact-form').validate({ 
 
    rules: { 
 
    your_input_name: { 
 
     required: true 
 
    } 
 
    }, 
 
    messages: { 
 
    your_input_name: { 
 
     required: 'Field is required' 
 
    } 
 
    }, 
 
    submitHandler: function() { 
 
    var form = $(this); 
 
    var post_data = form.serialize(); //Serialized the form data for process.php 
 
    $('#loader').html('<img src="../spinner.gif" /> Please Wait...'); 
 

 
    form.fadeOut(500, function() { 
 
     form.html("<h3>Thank you.").fadeIn(); 
 
     $('#loader').html(''); 
 
    }); 
 

 
    // Normally would use this 
 
    $.ajax({ 
 
     type: 'POST', 
 
     url: 'process.php', // Your form script 
 
     data: post_data, 
 
     success: function(msg) { 
 
     form.fadeOut(500, function() { 
 
      form.html(msg).fadeIn(); 
 
     }); 
 
     } 
 
    }); 
 

 
    return false; 
 
    } 
 
});