I'm just learning Jquery, but I'm going crazy trying to add a validation client/server side. I use Jvalidate and it just work when i check it "alone", without the "$.ajax" part, but when I put it all together Firebug launch an error :
SyntaxError: missing : after property id $('#inputSKU').submit(function(){
...and I don't why...
My objective is that once validation is right (client/remote) use the url from the $ajax to inset into the database...
Could you take a look to my code, please?
<!DOCTYPE html>
<html lang="es">
<meta charset="UTF-8">
<html>
<!-- http://localhost/260814/index.html -->
<head>
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script src="additional-methods.js"></script>
</head>
<script type="text/javascript">
$('document').ready(function() {//documentready
jQuery.validator.addMethod("SKUCorrecto",function(value,element,param)
{//validatoraddmethod
if(this.optional(element))
{//This is not a 'required' element and the input is empty
return true;
}
if(/^[0-9]{11}$/.test(value))
{
return true;
}
return false;
},"Please enter a valid SKU");//addmethodend
$("#inputSKU").validate({ //validate
onkeyup: false,
rules: {
SKU: { required: true, SKUCorrecto:true, remote:"check_SKU.php" },
},
messages: {
SKU:{ remote: "sku ok info de remote" }
},
$('#inputSKU').submit(function(){
$('#PaginaResultado').html("<b>Loading response...</b>");
$.ajax({
type: 'POST',
url: 'post_receiver.php',
data: $(this).serialize()
})
.done(function(data){
$('#PaginaResultado').html(data);
$('#inputSKU')[0].reset();
})
.fail(function() {
//alert( "" );
});
return false;
});
});//validate
});//documentready
</script>
<form id="inputSKU" method="POST">
<table>
<tbody>
<tr>
<td><label for="sku">SKU: *</label></td>
<td><input id="sku" name="SKU" type="text" /></td>
</tr>
<tr>
<tr>
<td><input type="submit" /></td>
<td></td>
</tr>
</tbody>
</table>
</form>
<div id="PaginaResultado"> paginaresultado </div>
</html>
With this code validation doesn't work and I can't solve the Firebug error...
Thanks in advance...
It looks like you've put your submit event binder/handler inside the validate object-
<script>
$(document).ready(function() { //document ready - don't actually need to quote this, document is a JavaScript object
jQuery.validator.addMethod("SKUCorrecto", function (value, element, param) { //validatoraddmethod
if (this.optional(element)) { // This is not a 'required' element and the input is empty
return true;
}
if (/^[0-9]{11}$/.test(value)) {
return true;
}
return false;
},
"Please enter a valid SKU"); // add method end
$("#inputSKU").validate({ // validate
onkeyup: false,
rules: {
SKU: { required: true, SKUCorrecto:true, remote:"check_SKU.php" },
},
messages: {
SKU: { remote: "sku ok info de remote" }
} // removed invalid trailing comma
}); // end of validate
$('#inputSKU').submit(function(){
$('#PaginaResultado').html("<b>Loading response...</b>");
$.ajax({
type: 'POST',
url: 'post_receiver.php',
data: $(this).serialize()
})
.done(function(data){
$('#PaginaResultado').html(data);
$('#inputSKU')[0].reset();
})
.fail(function() {
//alert( "" );
});
return false;
});
});// document ready
</script>
Whilst it is perfectly valid to have a function within an object, it needs to still be in the key/value format as per-
var foo = {
functionKey: function () {
// do something
}
}
The error message you saw was that there was no key.
In your case, looking at the code, I don't think you meant to put the event handler inside the object anyway, so I have moved it out. Maintaining good formatting, and- in particular - strong indentation on source code is extremely helpful in guiding you to structure your code correctly.