I'm trying to use JQuery Validation to validate a form.
I have one field that can be empty, but if non-empty must have digits. JQuery validation handles that fine by setting "class='digits'". My problem is that I have a button that uses javascript to clear the field.
If I type a non-digit into the field, I have a "Please enter only digits" error displayed. If I click the button, the field is cleared, but the "Please enter only digits" error is still displayed. This is incorrect, because for the field to be empty is not an error.
I'm clearing the field with:
jQuery('#mybutton').click(function()
{
jQuery('#myfield').val('');
});
This is working.
I figured I could re-run the validation with:
jQuery('#mybutton').click(function()
{
jQuery('#myfield').val('');
jQuery('#myfield').validate();
});
There is a validate() method defined on the jQuery object, but calling it does not cause the error message to disappear.
Any ideas?
the jquery validate provides a reset function for this.
resetForm();
Related
I am in React 16+, using withFormik for the form.
Its a single field form which on initial use will have an empty string value. I want the initial value to be validated so the user knows they must fill a value.
So blank string "" initial value, i want the error to say "please enter a value" without the user touching or anything. onload.
formik docs claim it can do this thru the built in tools, but the library/docs dont add up.
validateOnMount:
https://formik.org/docs/api/withFormik#validateonmount-boolean
this value does nothing when set to true in my form. There are lots of logged issues of others having the same problems. It seems formik depreciated an old property that used to do this well. i cant find anything to do this without building some type of hack.
how can i have formik run the validation as ssoon as the from mounts.
in case your answer is to disable the "enableReinitialize" property, ive tried this in conjunction with validateOnMount: true and still get nothing.
I have an HTML region in the page, where I have few fields and button. Button is set to Submit page action.
On the same page I have Validation process, with Function returning Error text type.
This is the Validation expression 1:
if :P5_CELL_LEFT + :P5_CELL_RIGHT = 10 then
return 'Stop it!';
else
return null;
end if;
Validation expression 2 is empty. Now when there is no error and function doesn't return null, then the page URL stays intact (https://domain.com/f?p=333:5:0::NO:::). However, when validation is not passing, then I see the error message on top of page, but the current page url is changing to https://domain.com/wwv_flow.accept. How to prevent current page URL from changing, even if validation is not passed?
What is it that you're really trying to accomplish? Once you submit the page wwv_flow.accept is the standard APEX behavior. In addition to the APEX validation, you could use some JS for your validation and stop page submission. That would maintain the URL intact.
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've added the following code for my jqgrid:
changeTextFormat = function (data) {
return "Activity or one from the same price group already used";
};
jQuery.extend(jQuery.jgrid.edit, {errorTextFormat: changeTextFormat })
It works great for insert and I get the error message appearing in the top of the dialog.
However for edits it's not working so well. Instead a massive dialog is appearing with the error message.
I'm currently thinking that it's because I'm using inline editing so it has to pop up a whole new dialog. Is there a way to format this dialog better. I'm pretty sure that for the inline edits it's not even running through changeTextFormat after an exception.
It's correct. By changing of jQuery.jgrid.edit you set errorTextFormat only for the form editing. In case of the usage inline editing you have to use errorfunc parameter of the editRow.
You can easy see the difference between errorTextFormat and errorfunc parameter. If in the errorTextFormat you should return the error message which will be used in the error message, the callback function errorfunc should display the corresponding error message itself. If you want to have the same look of the error dialog you can use $.jgrid.info_dialog method. In the answer you could find the corresponding code fragment. See additionally the code fragment of the jqGrid source code.
I have a wizard style page that I want to validate a page at a time. So before the user can move off the (partial) page I submit the inputs from the div for validation. Client side validation works OK but on some pages there are one or more fields I need to validate on the server. Yes I know about remote validation.
I can get the server side validation done without a problem. The issue I have is how do I display the errors on the correct fields? I can locate the fields in the div and find the span where the error message is suppose to go. But I just can't get the message to display.
I must be missing something when updating the field span. I would have thouht that there is a jQuery routine to add error information to a field. I need something similar to the controllers AddModuleError. So when I get return from my $.Post I can set error text on the appropriate fields.
Any suggestions?
A potential solution to your problem might be in this article "Client side validation after Ajax Partial View result in ASP.NET MVC 3"
Basically, once you get your html from the post you can invoke validation using jQuery.validator.unobtrusive.parse()
As per the example in the article;
$.post("YourAction", { data: <your form data> },
function(htmlContent){
$('#container').html(htmlContent);
jQuery.validator.unobtrusive.parse('#content')
}
Worth looking into
If you are using the included RemoteAttribute, or the version I linked to in my answer to your other remote validation question, then you should not have to worry about displaying the error, as both work with the ValidationMessage helpers to automatically display errors.
Have you added Html.ValidationMessage(...) or Html.ValidationMessageFor(...) for each field to be validated?