Jquery validation stopped working - javascript

here's my call to the validate function. Everything works fine with this code.
$('#createForm').validate(function () {
});
But when I try to modify it a bit, the whole validation stop working:
$('#createForm').validate(function () {
errorPlacement: function(error, element) {
error.insertAfter(element);
},
debug:true
});
Any Idea?


you shouldn't have function() in there. change it to:
$('#createForm').validate(
{
errorPlacement: function(error, element) {
error.insertAfter(element);
},
debug:true
}
);
the stuff in the { } is the options. it's not a function :)


just remove function () in .validate(function () { and that should work...

Related

jquery fileupload.js this._on is not a function error

_initEventHandlers: function () {
if (this._isXHRUpload(this.options)) {
this._on(this.options.dropZone, {
dragover: this._onDragOver,
drop: this._onDrop,
// event.preventDefault() on dragenter is required for IE10+:
dragenter: this._onDragEnter,
// dragleave is not required, but added for completeness:
dragleave: this._onDragLeave
});
this._on(this.options.pasteZone, {
paste: this._onPaste
});
}
if ($.support.fileInput) {
this._on(this.options.fileInput, {
change: this._onChange
});
}
this code inside Jquery.fileupload.js but throw error:
this._on() is not a function
what can i do?

Validate form after Click with jquery validate

I have 3 forms in the same page and I want to validate when I click the button, but I have to click twice.
$(document).ready(function () {
$(".form_foo").submit(function (e) {
salvaformRisposta($(this).attr('id'));
e.preventDefault(e);
});
});
function validateForm(form_id) {
$("#"+form_id).validate({
rules: {
},
submitHandler: function (form) {
salvaformRisposta(form);
}
});
}
UPDATE:
I resolved with
$(".form_foo").each(function(key, form) {
validateForm(form.id);
});
//
$(".form_foo").submit(function (e) {
console.dir($(this).attr('id'));
validateForm($(this).attr('id'));
e.preventDefault(e);
});

You can do something like that
$(document).ready(function(){
$('#your_form_id').validate({
rules: {
....
}, messages: {
...
}, submitHandler: function (form) {
//insert here your code if validation is ok
}
}
});
insert this snippet in a forEach

$(document).ready(function () {
validateForm('form_Id');
});
Try to Invoke validateForm() method in your document ready event.
substitute 'form_Id' with real form Id

Using on() with a map

I am trying to refactor my code and decided to re-implement my on events by mapping
Here's what i have:
$('img#sorc').on({
mousemove: function (e) {
alert('test in');
}
}, {
mouseleave: function () {
alert('test out');
}
});
Now mouseleave won't work.
I checked my code x10 and stared at it for so long, what did i miss?

You have additional }, { remove it with ,
$('img#sorc').on({
mousemove: function(e) {
alert('test in');
},
mouseleave: function() {
alert('test out');
}
});

How do I mix between addClass Api and fadein?

I just would like to put color on div by addClass event and then it should fade in.
$("#box1").hover(
function () {
$("#box2").addClass("blue");
$("#box3").addClass("yellow");
},
function () {
$("#box2").removeClass("blue");
$("#box3").removeClass("yellow");
}
);
$("#box2").hover(
function () {
$("#box1").addClass("blue");
$("#box4").addClass("yellow");
},
function () {
$("#box1").removeClass("blue");
$("#box4").removeClass("yellow");
}
);

I know it's pretty ugly but it's worked :
$('#box1').hover(function () {
$("#box2").fadeOut(0).addClass('blue').fadeIn(300);
},
function () {
$("#box2").fadeOut(300).queue(function(){ $(this).removeClass('blue').fadeIn(0).dequeue()});
});
Demo here : JSFIDDLE

Cutting down JQuery repetitive code

In a Jquery code I've the following situation:
$("#input_field").on('input', function () {
setTimeout(function (e) {
$.post("endpoint.php", $('#main').serialize(), function (response) {
parseRes(response);
});
}, 1);
});
$("#input_field").on("paste", function () {
setTimeout(function (e) {
$.post("endpoint.php", $('#main').serialize(), function (response) {
parseRes(response);
});
}, 1);
});
The only different thing is the event ("input" or "paste").
Is there any way to avoid this kind of repetitions (eg. adding more events to ONE code block)?

Try,
$("#input_field").on('input paste',function() {
setTimeout(function(e) {
$.post("endpoint.php", $('#main').serialize(), function (response) {
parseRes(response);
});
}, 1);
});
Please read here to know more about .on()

From the documentation:
.on( events [, selector ] [, data ], handler(eventObject) )
events: One or more space-separated event types and
optional namespaces, such as "click" or "keydown.myPlugin".
This means your code simply boils down to:
$("#input_field").on('input paste',function() {
// ...
});

Categories