Périphériques Ios, champ "requis" et message de remerciement

Question

Je souhaite fusionner deux JavaScripts. Le premier utilise ajax pour envoyer un message et le second pour alerter l'utilisateur sur le champ requis dans le formulaire de contact.

Je veux fusionner ce deux, peut-être avec une instruction IF, donc d'abord pour vérifier tous les champs, puis pour envoyer un message.

1 avec JavaScript ajax:

$('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 alerte:

$('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; 
    }); 
}); 

De la réponse ci-dessous j'ai créer le code suivant.

J'ai fait ce lien si quelqu'un veut aider. L'alerte fonctionne bien mais le code ne s'arrête pas. Il continue à charger le code de repos.

https://jsfiddle.net/L8huq1t1/

Answer 1

Vous pouvez le faire par le code suivant.

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; 
    }); 
}); 

Mais je vous suggère d'utiliser le plugin jquery.validate qui est une meilleure option. Mais si vous voulez toujours faire comme ça, allez-y c'est aussi fonctionne bien.

Answer 2

Vous pouvez utiliser le plugin jQuery Validation disposant d'un gestionnaire de soumission de formulaire dans lequel vous pouvez placer votre AJAX. Link to the plugin.

Votre code devrait ressembler à ceci:

$('#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; 
 
    } 
 
});