I have done various tests and I have found that the jQuery validate function works only with the submit button.
Am I right? If yes how can I use the jQuery validate plugins without the submit button?
You can use the method valid() to invoke the validator directly.
It will return bool indicating whether the form is valid or not.
Here is an example, from jQuery documentation:
$("#myform").validate();
$("a.check").click(function() {
alert("Valid: " + $("#myform").valid());
return false;
});
When you call the validate method on the jQuery validate plugin it returns an instance of Validator which you should store. When you need to, you can call the form or showErrors methods on the Validator instance to either validate the form, or validate the form and show the errors respectively.
Related
I am using PHP Connect to submit a simple payment via Square. I’ve added a customer object, but do not see any validation settings for fields with the customer object via Square’s API. There must be a way to set custom required fields when dealing with a customer object. Can someone please point me the right way?
Here is the PHP script I am using to connect to Square:
https://github.com/square/connect-api-examples/blob/master/connect-examples/v2/php_payment/index.php
As you can see, there is an onclick event in the button submit:
<button id="sq-creditcard" class="sq-button" onclick="requestCardNonce(event)">
I can remove this event and validate fields via jQuery, but I am having trouble when attempting to run the event on successful validation. Here is one example I have tried:
$(“form”).submit(function(){
$(“input”).each(function(){
if($(this).val()){
good = true;
}else{
good = false;
}
});
if(good){
requestCardNonce(event);
}
});
This is just a stripped down version of what I am attempting. Essentially, just passing the requestCardNonce(event) after everything checks out. But when I do this, it breaks...
I'm trying to implement a checkbox captcha I read about here:
http://uxmovement.com/forms/captchas-vs-spambots-why-the-checkbox-captcha-wins/
However I'm having issues adding the checkbox with client side javascript and unobtrusive validation.
I implemented a checkbox with unobtrusive validation based on Darin Dimitrov's answer here: MVC unobtrusive validation on checkbox not working which works perfectly.
However, once I remove the checkbox from my view and add it with this jquery code instead:
jQuery(document).ready(function (jQuery) {
$('div.test').append($("<input>").attr("id", "AcceptsTerms")
.attr("type", "checkbox")
.val("true")
.attr("name", "AcceptsTerms")
.attr("data-val-required", "This field is required.")
.attr("data-val-mustbetrue", "You must accept the terms and conditions")
.attr("data-val", "true")
.addClass("input-validation-error"));
$('div.test').append($('<input>').attr("type", "hidden")
.val("value", "false")
.attr("name", "AcceptsTerms"));
$('div.test').append($("<label>").attr("for", "AcceptsTerms")
.html("Accept terms and conditions"));
$('div.test').append($('<span>').addClass("field-validation-error")
.attr("data-valmsg-replace", "true")
.attr("data-valmsg-for", "AcceptsTerms"));
});
it no longer wants to validate. Are there any known issues with adding form elements after the document has loaded and unobtrusive validation? If so, has any attempted to implement this or have any suggestions on how to go about this?
Looks like I found the solution.
As I suspected and as Sparky mentioned: the jQuery Validate plugin is initialized once on the DOM ready event. Due to this, all I had to do after adding my input dynamically was to reinitialize unobtrusive validation.
I added this first for the rule:
$.validator.unobtrusive.adapters.addBool("mustbetrue", "required");
Then I added this to reinitialize unobtrusive validation:
$("form").removeData('validator');
$("form").removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse($("form"));
Quote OP:
However, once I remove the checkbox from my view and add it with this
jquery code instead: {snip} it no longer wants to validate. Are there
any known issues with adding form elements after the document has
loaded and unobtrusive validation? If so, has any attempted to
implement this or have any suggestions on how to go about this?
This happens because the jQuery Validate plugin is initialized once on the DOM ready event but your checkbox does not yet exist. It's an all-too-common misconception that .validate() is called repeatedly as the user interacts with the form. It is not. .validate() is called once on DOM ready to initialize the plugin and form validation happens automatically when triggered by the default events.
If you need to dynamically alter the form's HTML, you must use one of the plugin's built-in methods to dynamically alter its options.
In your case, you need to use the rules('add') method, sometime after your jQuery adds the checkbox, to alter the rules option to apply your checkbox rule(s).
$(document).ready(function() {
$('div.test').append($("<input>").attr("id", "AcceptsTerms"). ... );
$('#AcceptsTerms').rules('add', {
required: true,
another_rule: parameter,
messages: { // <- this item is optional
required: "custom message"
another_rule: "custom message for this rule"
}
});
...
});
I am submitting and loading a new form via AJAX and want to use the same script that the first form uses to submit and load the new form to submit a comment. I have this script commented out so you cannot see it but when I use it, the commentForm.php loads and does not use the jQuery submission. I have tried it many ways with no luck.
$('#quoteForm').delegate('input:submit', 'submit',function(e) {
Any help would be appreciated.
If your form is getting replaced then you'll need to delegate the event handler to a parent element. And you'll need to bind to the form and not the submit button:
$('body').delegate('form', 'submit', function(e) {
// and you'll need this to prevent
// the form's 'default' action
e.preventDefault();
I have a form and unobtrusive validations are enabled. By default in submit method client side validation gets triggered and (if you have any errors) the form looks like this:
The validation happens even before any data gets sent to the server.
Now this behavior doesn't work if you want to use $.ajax method. Client side validation doesn't work. You have to manually check all the fields in your javascript, losing all the beauty of DataAnnotations.
Is there any better solution? I could've use jquery's submit() but I guess it doesn't have callback like $.ajax.
Oh...
if (form.valid()) // do submit
You must force the form to validate before checking if it is valid. Something like this:
var form = $( "#myform" );
form.validate();
if (form.valid()) {
// ...
}
I did...
$("#form-submit-button").click(function (e) {
e.preventDefault(); // Stops the form automatically submitting
if ($("#my-form").valid()) {
$("#my-form").submit();
}
});
This also seems to be a good solution if you have say textboxes with a plugin to make those textboxes into a calendar control. Only reason I say this is because I used Zebra Datepicker with an MVC form and it would submit an invalid form if focus was on the calendar date picker. Using the below code stops this.
I was having the same issue Yablargo was having in that it was saying that valid is not a function, so I came up with this:
For the onclick handler of the submit button, I put this:
onclick="return $(this).closest('form').checkValidity();"
I have a HTML form and within that form I have a DropDownList and a Button that can post to my action method. I want to disable the validation when the post is made by my DropDownList and enable it when it is made by the button.
In my action method I can differentiate, which one is making the post but I can not disable the validation.
I tried to set ValidateRequest = false but it didn't work. I don't want to use Ajax call at this stage.
Thank you
Try this:
Html.DropDownList(..., ..., new { disableValidation = "true" })