Question

$(document).ready(function(){
 $('a[rel=addhint]').click(function(){
  var html='<div><label>Hint</label>';
  html+='<span class="input"><input type="text" size="30" class="text" name="hint"/><a href="#" rel="delhint">delete</a></span><br class="clear" /></div>';
  $('div#hintTextContainer').append(html);
  bindDelHintAll();
  return false;
 });

I want when a new text area include vadition of required field and max length will also apply on it.

Answer 1

From the looks of your code you are dynamically building a form in the duration of a page view. In order to on-the-fly implement a form validation system you would need the function which creates the input to have a way to plug into the form validation system.

One solution would be to add an attribute to the field which would be read by the validation function.

<form name="testform" id="testform" method="post">
  <input type="text" name="hint" validation-params='{ "req" : true, "max-length" : 10 }'>
  <input type="submit">
</form>

<script>
  $(function() {
    $("#testform").submit(function() {
      var self = $(this);
      self.find("input").each(function() {
        var validation = jQuery.parseJSON($(this).attr("validation-params"));
        if (validation.req) { alert("required"); }
      }); 
      return false;
    });
  });
</script>

If you look at the example above, you’ll see that it creates a form. In the submit handler it takes the form and loops through every input on the form and grabs the validation-params attribute and converts the string attribute to a JSON object. It then checks a specific field, you could easily add your own validation to it right there.