Jquery only validates one element of several

1

I would like to display the required message on each input element in addition to performing the check on each pair of checkboxes and input text, but it is only occurring on the first input I am giving focus.

    <html>
    <head>  
    <script src="/jscss/jquery-2.0.3.js" type="text/javascript"></script>
    <script src="/jscss/jquery.validate.js" type="text/javascript"></script>
    <script>
    $(document).ready( function() {

//Método para verificar as notas com uso de expressão regular
$.validator.addMethod("verifica_media", function(value, element) {  
return   ((/^(((([1]{1}[0]{1})\.([0]{1}))|((([0_]{1})(\d){1}))\.(\d{1})))?$/i.test(value) && !($('.Checkconceito').is(":checked"))) || ((this.optional(element)) && ($('.Checkconceito').is(":checked"))));  
}, "Por favor entre com uma nota válida ou o conceito F.");

$(".conceito").validate({
// Define as regras
    debug: true,
    rules:{
        media:{
            verifica_media: true
        }
    },
    messages:{
        media:{
            required: "Digite uma média válida (valores entre 0.0 e 10.0"
        }
    }
        }); 

    }); 
    </script> 
    <script src="/jscss/jquery.maskedinput.js" type="text/javascript"></script>
    <script>
        jQuery(function($){
            $(".conceito").mask("99.9");        
        });
    </script>
    </head>
    <body><form id="formularioContato" method="post">

    <div align="center">
    <ul>
<li>
<label>Nota:</label><input type="text" id="nota" name="nota" class="conceito"></span>
<input type="checkbox" id="notaf" name="notaf" value="notaf" class="Checkconceito">Nota F
<br />
</li>
<li>
<label>Nota:</label><input type="text" size="4" id="nota" name="nota" class="conceito"></span>
<input type="checkbox" id="notaf" name="notaf" value="notaf" class="Checkconceito">Nota F
<br />
</li>
    </ul>
    </div>
        <input class="submit" type="submit" id="enviar" name="enviar" value="Enviar" />
    </form>

    </body>
    </html>
    
asked by anonymous 06.03.2014 / 22:52

1 answer

0
$(".conceito").validate({...})

The jQuery Validation Plugin is used in elements <input> , but in elements <form> . This is what caused errors in the console because the plugin did not find the settings defined when validated due to the elements used.

$("#formularioContato").validate({...})

This is the correct way to use the plugin, since this way it will be validating the form.

media:{
  verifica_media: true
}

This rule will validate elements by following the following% CSS rule, using the [name="media"] method, passing the verifica_media argument to it. Because, by HTML, we see that there are no elements with this selector not being validated.

To validate a class-based set of elements, allowing any number of elements in the form to be validated, use the custom method. When creating a method with the same class name it will be applied to the elements of the validated form:

/* remova */ $.validator.addMethod("verifica_media", function(value, element) { 
/*    use */ $.validator.addMethod("conceito", function(value, element) {

So this method will be applied to elements true , but not only this change in it another must be done: it, as written, checks if any .conceito is checked. Change so that it checks the own checkbox .Checkconceito being validated.

/* remova */ $('.Checkconceito').is(":checked")
/*    use */ $(element).next().is(":checked")

After these changes it looks like all the errors have been fixed.

    
07.03.2014 / 10:56