Log in

View Full Version : Help with jQuery form validation


reisve
05-19-2013, 09:09 AM
Hi.
Can someone help me finding why the jQuery is not validating the form on the following page? I'm new to jQuery...



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Negócios Angola</title>
<base href="http://root.com/divdev/">
<meta http-equiv="Content-Type" content="text/html; charset=Western (ISO-8895-1)" />
<link rel="stylesheet" type="text/css" href="css/backend.css">

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

<script>
// When the browser is ready...
$(function() {

// Setup form validation on the #addcat element
$("#addcat").validate({

// Specify the validation rules
rules: {
categories: "required",
newcat: "required",
catdesc: "required"
},

// Specify the validation error messages
messages: {
categories: "Tem que seleccionar a categoria parente",
newcat: "Introduza nova categoria",
catdesc: "Descreva a categoria"
},

submitHandler: function(form) {
form.submit();
}
});

</script>
</head>
<body>
<div class="searchspace">
<div class = "search">
<form class = "searchform">
<input class = "searchfield" type = "text" value = "Procurar..." onfocus = "if (this.value == 'Procurar...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Procurar...';}" />
<input class = "searchbutton" type = "button" value = "GO" />
</form>
</div>
</div>
<div class="infospace">
INFO LINE </div>
<div class="leftspace">
<div class = "menu">
<ul class="sexypanels">
<li><a href="admin/addcat.php">» Adicionar Categorias</a></li>
<!--
<li><a href="http://www.dynamicdrive.com/style/" >» CSS Examples</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">» JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">» DOM Reference</a></li>
<li><a href="http://www.cssdrive.com">» CSS Drive</a></li>
<li class="lastitem"><a href="http://www.codingforums.com/">» Coding Forums</a></li>
-->
</ul>
</div> </div>
<div class="middlespace">
<div class = "addcatheader">
Adicionar novas Categorias </div>
<div class = "addcat">
<form id = "addcat" method="post" action = "admin/addcat.php">
<table width = "100%" border = "0">
<tr>
<td width = "40%" align = "right" valign = "top"><label for="categories">Categoria Parente:</label></td>
<td width = "60%">
<select id = "categories" name = "cat_parent">
<option value = 0>Topo</option><option value = 2>&nbsp;&nbsp;|___Tecnologias da Informação</option><option value = 3>&nbsp;&nbsp;|&nbsp;&nbsp;|___Informática</option><option value = 5>&nbsp;&nbsp;|&nbsp;&nbsp;|&nbsp;&nbsp;|___Venda de Computadores </option><option value = 6>&nbsp;&nbsp;|&nbsp;&nbsp;|&nbsp;&nbsp;|___Consumiveis</option><option value = 4>&nbsp;&nbsp;|&nbsp;&nbsp;|___Infrastructuras</option> </select>
</td>
<tr>
<td colspan = "2">&nbsp;</td>
</tr>
<tr>
<td align = "right" valign = "top"><label for="newcat">Nome da Categoria:</label></td>
<td><input id = "newcat" type ="text" name = "cat_name"></td>
</tr>
<tr>
<td colspan = "2">&nbsp;</td>
</tr>
<td align = "right" valign = "top"><label for="catdesc">Descrição da Categoria:</label></td>
<td><textarea id = "catdesc" name = "cat_desc"></textarea></td>
</tr>
<tr>
<td colspan = "2">&nbsp;</td>
</tr>
<tr>
<td colspan = "2" align = "center"><button id = "submit" type = "submit">Adicionar</button></td>
</tr>
</table>
</form>
</div>
</div>
<div class="footer">
<div class = "footerdiv">
Negócios Angola - &copy; 2012 <br />
<a href=href="mailto:admin@negiciosangola.com" style = "text-decoration: none; color: #ffffff";>Contactar o Webmaster</a>
</div>
</div>
</body>
</html>


Thank You
jscheuer1
05-19-2013, 09:34 AM
I think there's also some other problem(s). But the code is missing a closing brace and a closing parenthesis for the $(document) function (corrected in the below, additions red):


<script>
// When the browser is ready...
$(function() {

// Setup form validation on the #addcat element
$("#addcat").validate({

// Specify the validation rules
rules: {
categories: "required",
newcat: "required",
catdesc: "required"
},

// Specify the validation error messages
messages: {
categories: "Tem que seleccionar a categoria parente",
newcat: "Introduza nova categoria",
catdesc: "Descreva a categoria"
},

submitHandler: function(form) {
form.submit();
}
});
});
</script>
letom
05-19-2013, 10:23 AM
Hi There..

Please run the following code..



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Negócios Angola</title>
<base href="http://root.com/divdev/">
<meta http-equiv="Content-Type" content="text/html; charset=Western (ISO-8895-1)" />
<link rel="stylesheet" type="text/css" href="css/backend.css">

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>


<script>
$(document).ready(function(){
$("#addcat").validate({
debug: true,
rules: {
categories: "required",
cat_name: "required",
cat_desc: "required"
},

// Specify the validation error messages
messages: {
categories: "Tem que seleccionar a categoria parente",
cat_name: "Introduza nova categoria",
cat_desc: "Descreva a categoria"
},


});
});
</script>
</head>
<body>
<div class="searchspace">
<div class = "search">

<input class = "searchfield" type = "text" value = "Procurar..." onfocus = "if (this.value == 'Procurar...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Procurar...';}" />
<input class = "searchbutton" type = "button" value = "GO" />
</form>
</div>
</div>
<div class="infospace">
INFO LINE </div>
<div class="leftspace">
<div class = "menu">
<ul class="sexypanels">
<li><a href="admin/addcat.php">» Adicionar Categorias</a></li>
<!--
<li><a href="http://www.dynamicdrive.com/style/" >» CSS Examples</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">» JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">» DOM Reference</a></li>
<li><a href="http://www.cssdrive.com">» CSS Drive</a></li>
<li class="lastitem"><a href="http://www.codingforums.com/">» Coding Forums</a></li>
-->
</ul>
</div> </div>
<div class="middlespace">
<div class = "addcatheader">
Adicionar novas Categorias </div>
<div class = "addcat">
<form id = "addcat" method="post" action = "admin/addcat.php">
<table width = "100%" border = "0">
<tr>
<td width = "40%" align = "right" valign = "top"><label for="categories">Categoria Parente:</label></td>
<td width = "60%">
<select id = "categories" name = "cat_parent">
<option value = 0>Topo</option><option value = 2>&nbsp;&nbsp;|___Tecnologias da Informação</option><option value = 3>&nbsp;&nbsp;|&nbsp;&nbsp;|___Informática</option><option value = 5>&nbsp;&nbsp;|&nbsp;&nbsp;|&nbsp;&nbsp;|___Venda de Computadores </option><option value = 6>&nbsp;&nbsp;|&nbsp;&nbsp;|&nbsp;&nbsp;|___Consumiveis</option><option value = 4>&nbsp;&nbsp;|&nbsp;&nbsp;|___Infrastructuras</option> </select>
</td>
<tr>
<td colspan = "2">&nbsp;</td>
</tr>
<tr>
<td align = "right" valign = "top"><label for="newcat">Nome da Categoria:</label></td>
<td><input id = "newcat" type ="text" name = "cat_name"></td>
</tr>
<tr>
<td colspan = "2">&nbsp;</td>
</tr>
<td align = "right" valign = "top"><label for="catdesc">Descrição da Categoria:</label></td>
<td><textarea id = "catdesc" name = "cat_desc"></textarea></td>
</tr>
<tr>
<td colspan = "2">&nbsp;</td>
</tr>
<tr>
<td colspan = "2" align = "center"><button id = "submit" type = "submit">Adicionar</button></td>
</tr>
</table>
</form>
</div>
</div>
<div class="footer">
<div class = "footerdiv">
Negócios Angola - &copy; 2012 <br />
<a href=href="mailto:admin@negiciosangola.com" style = "text-decoration: none; color: #ffffff";>Contactar o Webmaster</a>
</div>
</div>
</body>
</html>


for the select box validation , i need some more time to code it....because i am busy right now,,
any issues you can post here.
.
reisve
05-19-2013, 11:44 AM
@jscheuer1

No diference


@letom


It works. what did you do? But it does not check the "select" tag. How can I check if a value is selected?

Thank you
jscheuer1
05-19-2013, 03:01 PM
I had said there would still be problems. This works:


<script>
// When the browser is ready...
$(function() {

// Setup form validation on the #addcat element
$("#addcat").validate({

// Specify the validation rules
rules: {
cat_parent: "required",
cat_name: "required",
cat_desc: "required"
},


// Specify the validation error messages
messages: {
cat_parent: "Tem que seleccionar a categoria parente",
cat_name: "Introduza nova categoria",
cat_desc: "Descreva a categoria"
},

submitHandler: function(form) {
form.submit();
}
});
$('#categories').rules('add', {
min: 1,
messages: {
min: "Tem que seleccionar a categoria parente"
}
});
});
</script>
letom
05-19-2013, 03:06 PM
This is the understandable coding for you,


<script>
$(document).ready(function(){
$("#addcat").validate({

rules: {
cat_parent : {selectcheck: true},
cat_name: "required",
cat_desc: "required"
},

// Specify the validation error messages
messages: {
cat_name: "Introduza nova categoria",
cat_desc: "Descreva a categoria"
},


});

});
jQuery.validator.addMethod('selectcheck', function (value) {
return (value != '0');
}, "Tem que seleccionar a categoria parente");

</script>
jscheuer1
05-19-2013, 03:14 PM
This also works:


<script>
// When the browser is ready...
$(function() {

// Setup form validation on the #addcat element
$("#addcat").validate({

// Specify the validation rules
rules: {
cat_parent: {min: 1},
cat_name: "required",
cat_desc: "required"
},


// Specify the validation error messages
messages: {
cat_parent: {min: "Tem que seleccionar a categoria parente"},
cat_name: "Introduza nova categoria",
cat_desc: "Descreva a categoria"
},

submitHandler: function(form) {
form.submit();
}
});
});
</script>


The trick is when using that format, use the name of the field not the id, and for a select 'required' is meaningless. You can set a min value though for it.
What I had said earlier about the missing closing brace and parenthesis still applies.

Oh, and for the messages you can use just this if you prefer:


// Specify the validation error messages
messages: {
cat_parent: "Tem que seleccionar a categoria parente",
cat_name: "Introduza nova categoria",
cat_desc: "Descreva a categoria"
},

And another thing, the submitHandler doesn't appear to be required, submitting the form upon passing validation appears to be the default. So putting that all together, the simplest might be:


<script>
// When the browser is ready...
$(function() {

// Setup form validation on the #addcat element
$("#addcat").validate({

// Specify the validation rules
rules: {
cat_parent: {min: 1},
cat_name: "required",
cat_desc: "required"
},

// Specify the validation error messages
messages: {
cat_parent: "Tem que seleccionar a categoria parente",
cat_name: "Introduza nova categoria",
cat_desc: "Descreva a categoria"
}
});
});
</script>

For more info, see:

http://docs.jquery.com/Plugins/Validation
reisve
05-20-2013, 12:02 PM
Thank You all. I will not validate the select after all. The user can select the top option, so there is no point to make the user select an option.

Anyway, learned few things. Thank You