jQuery Validation on dynamic form

Question

I'm working on a legacy app that uses jquery validation on a dynamic form. Now I'm trying to pass the name of each textarea input to the validation but doesn't work or maybe I'm doing it wrong. I want to the fieldName variable inside validate(see below).

<form class="comment_form" id="update_comment">
  @foreach($user as $key => user)
   <textarea class="form-control" name="comment[$key]"></textarea>
  @endforeach
</form>

<script>
 var $fieldName;
    $.validator.addMethod("allowedChars", function (value) {
        var reg = /^[A-Za-z0-9 _@./*!'"#&+-]*$/;
        return reg.test(value);
    });

    //foreach loop here
    var comment = document.getElementsByTagName("textarea");
    for($i=0; $i < comment.length; $i++) {
        fieldName = comment.name; // I want to the field name insode validate below
        console.log(fieldName);
        $("#update_comment").validate({
            rules: {
                fieldName: {
                    allowedChars: true
                }
            },
            messages: {
                fieldName: "Allowed special characters: _@./*!\'\"#&+-"
            }
    });

};

Please, try to console.log(comment.name) What do you get? comment is eventually a collection of multiple elements! Not ONE. If you want to target the iterating element use comment[i], not comment — Roko C. Buljan
– Roko C. Buljan, Commented Feb 8, 2022 at 0:03
I don't understand, why do you use $("#update_comment").validate({ inside a for loop? Isn't enough to set the validation rules once? ;) — Roko C. Buljan
– Roko C. Buljan, Commented Feb 8, 2022 at 0:05
I'm really glad you got it sorted out with the help of Twisty. And yes, one of the reasons I was reluctant in providing a full-blown answer was because of my time constraints, laziness, and you not providing a minimal reproducible example :) Happy coding! — Roko C. Buljan
– Roko C. Buljan, Commented Feb 8, 2022 at 0:32

Nimantha · Accepted Answer · 2022-06-01 05:57:08Z

Consider the following.

var $fieldName;
$.validator.addMethod("allowedChars", function(value) {
  var reg = /^[A-Za-z0-9 _@./*!'"#&+-]*$/;
  return reg.test(value);
});
var opts = {
  rules: {},
  messages: {}
};

//foreach loop here
$("textarea").each(function(i, el) {
  $fieldName = $(el).attr("name");
  console.log($fieldName);
  opts.rules[$filedname] = {
    allowedChars: true
  }
  opts.messages[$fieldName] = "Allowed special characters: _@./*!\'\"#&+-";
});

$("#update_comment").validate(opts);

Based on the following Docs: https://jqueryvalidation.org/validate/

Not sure if that is the correct library or version, since you didn't include them, but I think it's right.

Key/value pairs defining custom rules. Key is the name of an element (or a group of checkboxes/radio buttons), value is an object consisting of rule/parameter pairs or a plain String. Can be combined with class/attribute/data rules. Each rule can be specified as having a depends-property to apply the rule only in certain conditions.

For example, if you have 3 Text Areas with Names: Text1, Text2, Text3. The resulting Object should look like this.

{
  rules: {
    Text1: {
      allowedChars: true
    },
    Text2: {
      allowedChars: true
    },
    Text3: {
      allowedChars: true
    }
  },
  messages: {
    Text1: "Allowed special characters: _@./*!\'\"#&+-",
    Text2: "Allowed special characters: _@./*!\'\"#&+-",
    Text3: "Allowed special characters: _@./*!\'\"#&+-",
  }
}

Collectives™ on Stack Overflow

jQuery Validation on dynamic form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related