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;
});
Related
I have the following validation code...
jQuery('#MyForm').validate({
ignore: ".ignore",
rules: {
FirstName: {
required: function () { //this works
return (document.getElementById("FirstName").value === '');
}
},
LastName: {
required: true //this doesn't work
}
...
For some reason, if I specify the rules like "LastName" above, it doesn't work. However if I put a function to explicitly validate the field, like "FirstName", it does work.
Can anyone suggest a possible reason for this?
Either style works fine in other browsers.
Some other questions have suggested adding "X-UA-Compatible" meta tag, but that makes no difference in this case.
After some further investigation, I can see that it's erroring in jquery.validate.js, at this line...
settings[ eventType ].call( validator, this, event );
in this block of code...
var validator = $.data( this.form, "validator" ),
eventType = "on" + event.type.replace( /^validate/, "" ),
settings = validator.settings;
if ( settings[ eventType ] && !$( this ).is( settings.ignore ) ) {
settings[ eventType ].call( validator, this, event );
}
There seems to be an issue with jQuery Validate v1.18.0, I've downgraded to 1.17.0, and it's working correctly again.
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 using jqgrid and ajaxFileUpload.js script in order to pass parameters and files to a php script. The structure of the code is like this:
...
url:url_1.php,
beforeSubmit: function (postdata,formid)
{
$.ajaxFileUpload (
{
url: url_2.php,
...
success:
error:
}),
return[true,""];
},
afterSubmit: function(reponse,postdata)
{
...
return [true,'',''];
}
I have a dilemna:
According to the jqgrid behaviour, url_2.php is called, then url_1.php.
url_2.php handles the data (parameters + file), url_1.php handles nothing.
url_2.php could return an error or message (e.g "already exist") but, the errors are displayed in the form by the aftersubmit event, and this event receives error from url_1.php !!!
I suppose that I am obliged to put the ajaxfileupload in the beforesubmit event !!!
Any ideas to solve this dilemna ?
You can use jquery form plugin and jqGrid dataProxy method instead.
useDataProxy: true,
dataProxy : function (opts, act) {
opts.iframe = true;
var $form = $('#FrmGrid_' + $grid.jqGrid('getGridParam', 'id'));
//Prevent non-file inputs double serialization
var ele = $form.find('INPUT,TEXTAREA,SELECT').not(':file');
ele.each(function () {
$(this).data('name', $(this).attr('name'));
$(this).removeAttr('name');
});
//Send only previously generated data + files
$form.ajaxSubmit(opts);
//Set names back after form being submitted
setTimeout(function () {
ele.each(function () {
$(this).attr('name', $(this).data('name'));
});
}, 200);
};
For example http://jqgrid-php.net file fileUpload class uses this. This is described in How to force dataProxy call in form editing if editurl is set in jqgrid also.
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);
}
}
i just came across this ajax upload plugin and i wish to use it inside a form as shown in the demo page example 3. For some reason i am not able to make it work. I am not sure what parameters come into the function. For example here is my sample code.
$(document).ready(function(){
var upload = new AjaxUpload('property_i',
{
action: 'submitproperty.php',
autoSubmit: false,
onSubmit : function(file , extension){
return false;
}
});
var upload_data = upload.setData({
'propertytype':'propertytype'
});
});
Now the ID used in the AjaxUpload function should be ID of the or of the Entire form. Also how do i use setData method. Any suggestions or links will be very helpful. Thanks
I got it to work with the following code:
new AjaxUpload('#uploader_button', {
action: 'filename.ashx',
autoSubmit: true,
onSubmit: function(file, ext) {
// --- stuff here
// --- add postdata parameters
this.setData({ id: 1, title: docTitle.val() });
},
onComplete: function(file, response) {
// --- stuff here too
}
});
it doesn't utilize the var but instead adds the custom data params in the onSubmit block. The only other difference is that I haven't wrapped the parameter key in quotes as it seems to serialize correctly. And I'm not using autoSubmit: false , but instead it's true...
The only way I could get this to work with autoSubmit: false is to add this outside any function:
var uploader;
var uploadFile;
then in the AjaxUpload(...
onChange: function(file, response){
uploader = this;
uploadFile = file;
},
then in the function to do the upload:
uploader.setData({session: session});
uploader.submit();
Hope this helps
I'm using uploadify and very useful.
http://www.uploadify.com/