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...

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>
  // 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):

Code:

  <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..

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:

Code:

  <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,

Code:

<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:

Code:

  <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:

Code:

        // 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:

Code:

  <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

Thread: Help with jQuery form validation

Thread Tools

Search Thread

Help with jQuery form validation

Similar Threads

form-validation.js AND jquery.min.js not working together

Field validation w/js and jquery

form validation with jquery

Change validation on Jquery Form Wizard

Use Spry Validation with jQuery Form to Form Wizard (v1.1)

Bookmarks

Bookmarks

Posting Permissions