All geek questions in one place

Javascript validation for dynamic element

How can I check dynamically created text inputs?

I have a “add more” link that creates new ones, and a link to delete them. Each of them has an uniqe identifier.

In addition, at least two text fields must be filled.

+4
source share
3 answers

I wrote a blog post explaining how to dynamically add input to a form and at the same time add validation rules for the jQuery Validate plugin.

In my example, this was an order form for helmets:

//Each set of helmet inputs gets unique IDs function newHelmetInputs(i){ var inputSet = ''; inputSet += '<label for="helmet'+ i +'color">Helmet '+ i +' Color</label>' inputSet += '<input id="helmet'+ i +'color" name="helmet['+ i +'][color]"/>' inputSet += '<label for="helmet'+ i +'size">Helmet '+ i +' Size</label>' inputSet += '<input id="helmet'+ i +'size" name="helmet['+ i +'][size]"/>' return inputSet; } //Actually adding them to the page $('#addhelmet').click(function(){ var i = nextNumber(); //nextNumber() is a closure - see my blog for details var newInputs = newHelmetInputs(i); //i is used above in IDs $(this).before(newInputs); ('#helmet' + i + 'size').rules('add', {digits: true}); //matching validation rule });

The blog post is described in more detail and also explains how to handle this using PHP.

Regarding the requirement that at least two text fields be filled, I wrote for him a jQuery validation method and a similar one that says: "either fill in at least X fields in this section, or skip the section completely."

So, for example, if your form allows people to order sandwiches, and each sandwich has an entrance for bread and filling, you can dynamically add fields for as many sandwiches as they want to order. They don’t need to fill anything with a No. 2 sandwich, but if they do, they should give you both the bread and the type of filling.

+3
source

Using the Validation plugin , you can dynamically add rules . Here is an example:

 <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <script type="text/javascript" src="jquery-1.4.1.js"></script> <script type="text/javascript" src="jquery.validate.js"></script> <script type="text/javascript"> var count = 0; $(function() { $('form').validate({ rules: { input0: { required: true } }, message: { input0: { required: 'This field is required' } } }); $('a').click(function() { count++; var newElement = $('<input type="text" name="input' + count + '" value="" />'); $('form').append(newElement); newElement.rules('add', { required: true, messages: { required: 'This field is required' } }); return false; }); }); </script> </head> <body> <form> <input type="text" name="input0" value="" /> <input type="submit" value="OK" /> </form> <a href="#">Add input</a> </body> </html>
+6
source

An easy way to do this is to count the number of non-empty text fields to send.

  $(function()) { $('form').submit( function() { if ($(this).find('input:text') .filter( function() { return $(this).val() != ''; }) < 2) { ... display validation errors... return false; } return true; }); }):
0
source

Source: https://habr.com/ru/post/1300065/

More articles:


All Articles