6
मैं Bootbox.js का उपयोग करके ऑन-द-फ्लाई पर एक फॉर्म के साथ एक संवाद बॉक्स लोड कर रहा हूं और मैं एक jQuery सत्यापन प्लगइन के साथ उपयोगकर्ता इनपुट को मान्य कर रहा हूं।jQuery। Validate() submitHandler फायरिंग नहीं
प्रमाणीकरण ठीक काम करता है, लेकिन submitHandler को सफलतापूर्वक भरने पर अनदेखा किया जाता है।
क्या गलत हो रहा है?
submitHandler: function(form) {
alert("Submitted!");
var $form = $(form);
$form.submit();
}
नीचे पूरा उदाहरण देखें। मैंने अन्य पदों पर ध्यान दिया है जहां एक समान मुद्दा उठाया गया है। दुर्भाग्य से वे पृष्ठ पर प्रस्तुत प्रपत्र प्रतीत होते हैं जबकि मैं jQuery के माध्यम से अपना प्रतिपादन कर रहा हूं।
$(document).on("click", "[data-toggle=\"contactAdmin\"]", function() {
bootbox.dialog({
title: "Contact admin",
buttons: {
close: {
label: 'Close',
className: "btn btn-sm btn-danger",
callback: function() {}
},
success: {
label: "Submit",
className: "btn btn-sm btn-primary",
callback: function() {
$("#webteamContactForm").validate({
rules: {
requestType: {
required: true
}
},
messages: {
requestType: {
required: "Please specify what your request is for",
}
},
highlight: function(a) {
$(a).closest(".form-group").addClass("has-error");
},
unhighlight: function(a) {
$(a).closest(".form-group").removeClass("has-error");
},
errorElement: "span",
errorClass: "help-blocks",
errorPlacement: function(error, element) {
if (element.is(":radio")) {
error.appendTo(element.parents('.requestTypeGroup'));
} else { // This is the default behavior
error.insertAfter(element);
}
},
submitHandler: function(form) {
alert("Submitted!");
var $form = $(form);
$form.submit();
}
}).form();
return false;
}
}
},
message: '<div class="row"> ' +
'<div class="col-md-12"> ' +
'<form id="webteamContactForm" class="form-horizontal" method="post"> ' +
'<p>Please get in touch if you wish to delete this content</p>' +
'<div class="form-group"> ' +
'<div class="col-md-12"> ' +
'<textarea id="message" name="message" class="form-control input-md" rows="3" cols="50">This email is to notify you the creator is putting a request for the following item\n\n' +
this.attributes.getNamedItem("data-url").value + '\n\n' + '</textarea> ' +
'<span class="help-block">Feel free to change the message and add more information. Please ensure you always provide the link.</span> </div> ' +
'</div> ' +
'<div class="form-group requestTypeGroup"> ' +
'<label class="col-md-4 control-label" for="requestType">This request is for:</label> ' +
'<div class="col-md-4"> <div class="radio"> <label for="Edit"> ' +
'<input type="radio" name="requestType" id="requestType-0" value="Edit"> ' +
'Editing </label> ' +
'</div><div class="radio"> <label for="Delete"> ' +
'<input type="radio" name="requestType" id="requestType-1" value="Delete"> Deletion</label> ' +
'</div> ' +
'</div> </div>' +
'</form> </div> </div>'
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js"></script>
<a data-toggle="contactAdmin" data-title="help" data-url="http:/www.mydomain.com/some-url" href="#">Contact Web team</a>
आप वास्तव में 'submitHandler' को हटा नहीं सकते क्योंकि यह प्लगइन में बनाया गया है। हालांकि, कस्टम 'submitHandler' का उपयोग करते समय,' फ़ॉर्म 'तर्क को सीधे' submit ') से जोड़कर अनंत लूप त्रुटियों से बचें। देखें: https://jsfiddle.net/vyaw3ucd/5/ – Sparky
जो सत्य है, यह एक अनंत लूप में तब तक जाएगा जब तक फॉर्म तर्क संलग्न नहीं होता है। हालांकि, सबमिटहैंडर को जोड़ना आपके उदाहरण के अनुसार कोड में होने जैसा समतुल्य प्रतीत होता है। मैंने इसे अपने पर्यावरण में परीक्षण किया है और यह एक बार फॉर्म सबमिट करने की अपेक्षा के अनुसार काम करता है। धन्यवाद फिर से –
हां। मेरा डेमो मूल रूप से केवल अंतर्निहित डिफ़ॉल्ट था ... वह मेरा मुद्दा था। – Sparky