Results 1 to 8 of 8

Thread: Help with jQuery form validation

  1. #1
    Join Date
    May 2013
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help with jQuery form validation

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2012
    Posts
    197
    Thanks
    54
    Thanked 3 Times in 3 Posts

    Default

    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.
    .
    You will know the truth, and the truth will set you free (John 8:32)(The truth is about the only begotten son of GOD.....When you feel you are alone for facing your problems, God will never leave you by your own You are important for God

  4. #4
    Join Date
    May 2013
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    @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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jul 2012
    Posts
    197
    Thanks
    54
    Thanked 3 Times in 3 Posts

    Default

    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>
    Last edited by letom; 05-19-2013 at 04:24 PM.
    You will know the truth, and the truth will set you free (John 8:32)(The truth is about the only begotten son of GOD.....When you feel you are alone for facing your problems, God will never leave you by your own You are important for God

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

    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
    Last edited by jscheuer1; 05-19-2013 at 06:14 PM. Reason: add last code block
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    May 2013
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Similar Threads

  1. Replies: 1
    Last Post: 08-11-2012, 03:46 PM
  2. Field validation w/js and jquery
    By sme in forum JavaScript
    Replies: 2
    Last Post: 03-12-2012, 06:04 PM
  3. form validation with jquery
    By TwitterRooms in forum JavaScript
    Replies: 3
    Last Post: 01-29-2012, 10:36 PM
  4. Change validation on Jquery Form Wizard
    By richstro in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-23-2012, 10:21 PM
  5. Use Spry Validation with jQuery Form to Form Wizard (v1.1)
    By dreamwuser in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 01-05-2012, 11:57 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •