jQuery Validation Plugin query

Question

I have been trying to add validation to the phone field so it would accept only 10 to 14 digits (other better UK phone validation methods are also welcome).

I am using jQuery Validation Plugin.

<form class="form" id="lg.callback.form" action="[[~[[*id]]]]" method="post">
    <input type="hidden" name="nospam:blank" value=""/>
    <label for="name"> Name: <span class="error">[[!+fi.error.name]]</span></label>
    <input id="name" type="text" name="name" value="[[!+fi.name]]" required />
    <label for="phone"> Phone: <span class="error">[[!+fi.error.phone]]</span></label>
    <input id="phone" type="text" name="phone" value="[[!+fi.phone]]" class="phone"/>

    <input type="submit" value="Request a call back"/>

</form>

<script>
    $("#lg.callback.form").validate();
</script>

I did try the following:

$("#lg.callback.form").validate({
   rules: {
     phone: {
       required: true,
       digits: true,
       minlength: 10,
       maxlength: 14
     }
   }
})

but it does not work as expected.

Advice would be appreciated.

You can lock down the validation further by applying a regular expression to validate it. Its in the docs for jq validation plugin if you look. A good place to start looking for regex is here: http://www.regexlib.com/Search.aspx?k=uk%20phone — rtpHarry, Jul 17 '13 at 12:40
What's the bonus for being strict with this validation? You should try to bother your users the least as possible. People know what they enter and they can still put in bogus numbers. I like to type phone numbers with country code (+31 in the NL) and with spaces in between. — René, Jul 17 '13 at 12:43

Chirag Vidani · Accepted Answer · 2013-07-17T12:44:29.373

1

Try changing ID of your form tag. ID must not contain special character.

Try giving ID something like lgCallbackForm

After changing ID your code is working fine. Please check this link with your code

edited Jul 17 '13 at 12:44

answered Jul 17 '13 at 12:36

Chirag Vidani

2,519
18
26

Actually I just looked that up when I saw that and its an allowed character: http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html – rtpHarry Jul 17 '13 at 12:37
Oh I see from another reply its jquery that can have a problem with that, guess thats what you were referring to :) – rtpHarry Jul 17 '13 at 12:39
@rtpHarry But using this with jQuery might consider it as class. As in jquery lg.callback.form means selector lg with class callback and form – Chirag Vidani Jul 17 '13 at 12:41

jQuery Validation Plugin query

1 Answers1