Jquery only validates one multi-element

Asked

Viewed 598 times

1

I would like to show the required message in each input element in addition to performing the verification in each pair of checkbox and input text, but it is only occurring in the first input I am focusing on.

    <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>
jquery html

  • Could make the generated HTML available?

  • I can not unfortunately but the problem I believe is in Validator, he does not understand that I am in each input, he only intepreta the first that give focus.

  • I tried to interpret your code and generate the HTML manually, I couldn’t, which made it impossible to test your code. Use invented data and/or separate only the part of code that involves the validator.

  • I switched to a html test that generates basically the same case.

  • I created a bin based on its code: http://jsbin.com/fekikinu/1/edit

  • It would not be a problem with the Ids could not have two same ids

  • It seems that you are not using the plugin correctly: it validates <form>s and not <input>s. Since the selector is wrong jQuery does not find the correct variables and the code fails.

  • The Validator takes the name and not the id, I had removed the id’s and still remains the same.

  • @Samirbraga As for the Ids he is generating this code, only he use something like id="notaf-1".

  • I changed the selector in the bin to select the form and no errors appeared in the console. There is still a problem: the method verifica_media does not check if the checkbox that is related to input that is being validated, but this is easy to arrange.

  • Ready! The latest version of the bin works for any number of elements by checking elements with the class .conceito. He still checks for the checkbox next to the input. That’s what he was looking for?

Show 6 more comments

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 could not find the settings defined when validating, 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 [name="media"], using the method verifica_media passing on the argument true. As, by HTML, we see that there are no elements with this selector is not 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 validated form elements:

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

Thus this method will be applied to the elements .conceito, but not only this change in it another must be made: it, as it was written, checks whether any .Checkconceito is checked. Change it so that it checks its own checkbox input being validated.

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

After these changes it seems that all the bugs have been fixed.

  • Thank you for the knowledge provided by the reply.

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.