According to the documentation for the JQuery validation plugin:
the validation is lazy: Before submitting the form for the first time, the user can tab through fields without getting annoying messages
Is there any way to display the messages as the user tabs through the form?
Cheers
You can override the default onfocusout to do more eager/pre-submit validation you want, like this:
$(function() {
$("form").validate({
rules: { ...rules... },
messages: { ...messages... },
onfocusout: function(element) { $(element).valid(); }
});
});
The default onfocusout looks like this, disabling the blur validation until after it's been submitted once:
onfocusout: function(element) {
if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
this.element(element);
}
}
Related
I'm trying to add a validator to a form field in ExtJS 6.5.3.57 Classic or Modern. I thought from reading various posts that this should work, but when I run myField.isValid() it always returns true, and I don't see my console.log() statement firing so I have to assume my function isn't getting called.
{xtype: numberfield,
name: 'myField',
validator: function(field){
console.log('testing my validator');
return false;
}
}
I also tried this as I wasn't sure if it was validator or validators
{xtype: numberfield,
name: 'myField',
validators: {
fn: function(field){
console.log('testing my validator');
return false;
}
}
}
Am I wrong in thinking this should work?
Here's a fiddle showing that the top field in the login form which has a validator on it but never seems to log a message to the screen or console. https://fiddle.sencha.com/#fiddle/2eoa
The second example you gave is valid, I've made a working fiddle:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.Viewport.add({
xtype: 'textfield',
validators: {
fn: function(v) {
return v === 'abc' || 'Value must be abc'
}
}
});
}
});
I am trying to use a Kendo mobile widget - switch in my web application as below:
<input id="btnConvert" type="checkbox" onclick="onChange();" />
$(document).ready()
{
$("#btnConvert").kendoMobileSwitch({
onLabel: "UK",
offLabel: "US"
});
}
function onChange(e) {
alert(e.checked);//true of false
}
But its not firing the click event. i tried the onchange event which is also not working.
Also i tried
$('input:checkbox').change(function () {
}
but no success...
Define a change handler event in your switch definition.
$("#btnConvert").kendoMobileSwitch({
onLabel: "UK",
offLabel: "US",
change : function (e) {
alert("You changed the value");
}
});
See the documentation here.
I'm using an Ext.picker.Date and I have some checks I run on the hide event. However, if a certain criteria is met, I want to stop the process and have the date picker not hide.
I've tried using the beforehide event, and running my code there, but that event doesn't seem to fire.
Below is the config for my datepicker. If the condition is true, how can I stop the picker from hiding?
Thanks for any help.
var datePicker = new Ext.picker.Date({
docked: "bottom",
listeners: {
beforehide: function() {
console.log("before hide");
},
hide: function() {
if (1 == 1) {
//how do I stop the picker from hiding?
Ext.Msg.alert("You cannot select that date.");
}
}
},
slotOrder: ["day", "month", "year"],
useTitles: false
});
this.add(datePicker);
Are you using Sencha Touch 2? I'm going to assume so, since you're using Ext.picker.Date.
According to the documentation, the date picker doesn't fire a beforehide event:
Sencha Docs
What you really want to do here is insert some logic after 'Done' is tapped and before the picker hides itself. The picker calls onDoneButtonTap internally; you can inject your own logic like so:
Ext.define('MyApp.widget.DatePicker', {
extend: 'Ext.picker.Date',
xtype: 'mypicker',
onDoneButtonTap: function() {
if (1 == 1) {
Ext.Msg.alert("You cannot select that date.");
} else {
Ext.picker.Date.prototype.onDoneButtonTap.call(this);
}
}
});
this.add({
xtype : 'mypicker',
docked : "bottom",
slotOrder : ["day", "month", "year"],
useTitles : false
});
This is assuming that your logic will be able to access what it needs within the scope of the date picker. If this isn't the case, you can pass additional configuration to the date picker when you create it...maybe something like acceptedDateRange {...}
The simplest way could be:
var datePicker = new Ext.picker.Date({
docked: "bottom",
slotOrder: ["day", "month", "year"],
useTitles: false,
onDoneButtonTap: function() {
if (1 == 1) {
Ext.Msg.alert("You cannot select that date.");
} else {
Ext.picker.Date.prototype.onDoneButtonTap.call(this);
}
}
});
this.add(datePicker);
I think defining your own class like in the first example is the way to go, especially in situations where you inject logic into existing framework code and when you use the component in more than one place. But the second example will work as well.
I'm using jQuery Validate, but I really don't want to have any error messages whatsoever. Rather, I need to have red boxes around offending inputs/selects/etc. These red boxes were a piece of cake to add, but I still cannot remove error messages themselves. How do I disable them altogether?
Use a custom error placement function (see the plugin's options) that doesn't append the error message to anything.
$('#form').validate({
errorPlacement: function(error,element) {
return true;
}
});
Or you could put the error messages elsewhere on the page - say in a DIV at the top of the page.
You can override the showErrors function:
jQuery('form').validate({
showErrors: function(errorMap, errorList) {
// Do nothing here
},
onfocusout: false,
onkeyup: false,
rules: {
email: {
required: true
}
},
messages: {
email: {
required: 'The email is required'
}
}
});
This is how I do it. Just put $.validator.messages.required = ''; before your call to initialise validate() i.e.:
$.validator.messages.required = '';
$('#formData').validate({});`
This will make it show the styles on the inputs, but no message labels!
I'm using the jQuery.validate() to validate my form before it is submitted.
Now that I am using Ajax to submit my form, I have a problem.
Note: I am not using the jQuery form plugin. Just so that is clear :)
The jQuery.validate() is fired, but the form submission is also executed.
I don't want the form to be submitted until the validator is ok. Any god suggestions on how I can accomplish this?
UPDATE
I found the answer. I had to use the submitHandler. Now my form is only submitted if all the required fields are corectly populated.
and here's how:
if( jQuery('#my_form').length > 0 ) {
jQuery("#my_form").validate({
rules: {
brand_name: "required",
brand_email: {email: true },
brand_description: "required"
},
submitHandler: function() { processRegistration(jQuery("#my_form").attr("id"), jQuery("#my_form").serialize()); }
});
}
jQuery('#registrationforms form').submit(function() {
if (processRegistration(jQuery(this).attr("id"), jQuery(this).serialize())) {
// do ajax thing
};
return false;
});