jQuery फार्म मान्यकरण अजाक्स से पहले

Question

जावास्क्रिप्ट बिट सबमिट करें। विचार है कि मैं अपने फॉर्म को अजाक्स के साथ भेजने से पहले अपने सभी इनपुट मान्य कर दूं। मैंने अब इसके कई संस्करणों की कोशिश की है, लेकिन हर बार जब मैं पूरी तरह से भर नहीं जाता हूं, तब भी मैं सबमिट करने के साथ समाप्त होता हूं। मेरे सभी इनपुट "आवश्यक" वर्ग के हैं। क्या कोई देख सकता है कि मैं क्या गलत कर रहा हूं?

इसके अलावा, मैं कक्षा-आधारित आवश्यकताओं पर निर्भर करता हूं क्योंकि मेरे इनपुट नाम php के साथ उत्पन्न होते हैं, इसलिए मैं कभी भी यह सुनिश्चित नहीं कर सकता कि मुझे कौन सा नाम [आईडी] या इनपुट प्रकार मिलता है।

मैं प्रश्नों को दिखाता/छिपाता हूं क्योंकि मैं इसे "पृष्ठों" में जाता हूं।

<input type="button" id="next" onClick="toggleVisibility('form3')" class="next-btn"/> 

जे एस:

function toggleVisibility(newSection) 
     { 
      $(".section").not("#" + newSection).hide(); 
      $("#" + newSection).show(); 
     } 

Answer 1

आप submitHandler विकल्प का उपयोग कर सकते हैं। मूल रूप से इस हैंडलर के अंदर $.ajax कॉल डालें, यानी इसे सत्यापन सेटअप तर्क के साथ उलटा करें।

$('#form').validate({ 

    ... your validation rules come here, 

    submitHandler: function(form) { 
     $.ajax({ 
      url: form.action, 
      type: form.method, 
      data: $(form).serialize(), 
      success: function(response) { 
       $('#answers').html(response); 
      }    
     }); 
    } 
}); 

jQuery.validate प्लगइन हैंडलर प्रस्तुत करता है, तो सत्यापन बीत चुका है आह्वान करेंगे।

Answer 2

आप कर कोशिश कर सकते हैं:

if($("#form").validate()) { 
return true; 
} else { 
return false; 
} 

Answer 3

मुझे लगता है कि मैं पहला रूप मान्य और अगर प्रमाणीकरण में सफल होगा, की तुलना में मैं ajax पोस्ट होगा। स्क्रिप्ट के अंत में "वापसी झूठी" जोड़ने के लिए मत भूलना।

Answer 4

सबसे पहले आपको classRules को स्पष्ट रूप से जोड़ने की आवश्यकता नहीं है क्योंकि required स्वचालित रूप से jquery.validate प्लगइन द्वारा पता चला है। तो आप इस कोड का उपयोग कर सकते हैं:

1. फार्म पर भेजते हैं तो आप डिफ़ॉल्ट व्यवहार
2. को रोकने यदि प्रपत्र अमान्य रोक निष्पादन है।

3. अन्य अगर वैध AJAX अनुरोध भेजता है।

   $('#form').submit( function(e){  
   
         e.preventDefault(); 
         var $form = $(this); 
   
         // check if the input is valid 
         if(! $form.valid()) return false; 
   
         $.ajax({ 
          type: 'POST', 
          url: 'add.php', 
          data: $('#form').serialize(), 
          success: function(response) { 
           $("#answers").html(response); 
          } 
   
         }); 
        }); 
   

Answer 5

इस विशिष्ट उदाहरण सिर्फ इनपुट के लिए जाँच करेगा, लेकिन आप फिर भी यह tweak सकता है, अपने .ajax कार्य करने के लिए कुछ इस तरह करें:

beforeSend: function() {      
    $empty = $('form#yourForm').find("input").filter(function() { 
     return this.value === ""; 
    }); 
    if($empty.length) { 
     alert('You must fill out all fields in order to submit a change'); 
     return false; 
    }else{ 
     return true; 
    }; 
}, 

Answer 6

मुझे लगता है कि submitHandler jQuery मान्यता के साथ अच्छा है उपाय। कृपया इस कोड से विचार प्राप्त करें।@Darin दिमित्रोव से प्रेरित होकर

$('.calculate').validate({ 

       submitHandler: function(form) { 
        $.ajax({ 
         url: 'response.php', 
         type: 'POST', 
         data: $(form).serialize(), 
         success: function(response) { 
          $('#'+form.id+' .ht-response-data').html(response); 
         }    
        }); 
       } 
      }); 

Answer 7

> Required JS for jquery form validation 
> ## jquery-1.7.1.min.js ## 
> ## jquery.validate.min.js ## 
> ## jquery.form.js ## 

$("form#data").validate({ 
    rules: { 
     first: { 
       required: true, 
      }, 
     middle: { 
      required: true, 
     },   
     image: { 
      required: true, 
     }, 
    }, 
    messages: { 
     first: { 
       required: "Please enter first", 
      }, 
     middle: { 
      required: "Please enter middle", 
     },   
     image: { 
      required: "Please Select logo", 
     }, 
    }, 
    submitHandler: function(form) { 
     var formData = new FormData($("#image")[0]); 
     $(form).ajaxSubmit({ 
      url:"action.php", 
      type:"post", 
      success: function(data,status){ 
       alert(data); 
      } 
     }); 
    } 
}); 

Answer 8

फार्म देशी जावास्क्रिप्ट checkValidity समारोह HTML5 सत्यापन

$(document).ready(function() { 
    $('#urlSubmit').click(function() { 
     if($('#urlForm')[0].checkValidity()) { 
      alert("form submitting"); 
     } 
    }); 
});