Validation issues with JQuery

Question

iam working on a JQuery validation as below: (iam not much aware of jquery much)..

I am unable to accomplish below things:

only letters a to z (lower case), "-" (dash or hyphen) and " " (space) are allowed,
the "-" (dash) AND " " (space) letters MUST be entered,
the "-" or the " " letter must not be either the first or the last letter entered,
"-" must not be the immediate neighbour or adjacent (before or after) to a " ",
"-" or " " must not be the immediate neighbour (adjacent) to itself.
The 'telephone' number field (4 digit area code, a space, 7 digit local code)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
  <script type="text/javascript" 
          src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
  </script>

  <script type="text/javascript" 
          src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js">
  </script>

  <script>
    $(document).ready(function(){
      $("#commentForm").validate({
        onfocusout: function(element) { $(element).valid(); } ,
        rules: {
            fullname : {
              required: true,
              maxlength: 14,
            },                  
            email: {
              required: true,
              email: true
            }
        },
        messages: {
            fullname : {
              required: "Please specify your Full Name",
              maxlength:  "Please enter only upto 14 characters",
            },
            email: {
              required: "We need your email address to contact you",
              email: "Your email address must be in the format of name@domain.com"
            }
        }
      });
   });

   </script>

  </head>

  <body>

    <form id="commentForm" method="get" action="">

       <fieldset>

       <p>
         <label for="fullname">Full Name</label>
         <em>*</em><input id="fullname" name="fullname" size="25" class="required"  maxlength="14" />
       </p>


       <p>
         <label for="email">E-Mail</label>
         <em>*</em><input id="email" name="email" size="25"  class="required email" />
       </p>

     </fieldset>

  </form>
  </body>
</html>

please someone help me in achieving this..?

Check the [Documentation](http://docs.jquery.com/Plugins/Validation#Options_for_the_validate.28.29_method). It seems like the things you are trying to achieve is not part of this library. — SeinopSys, Dec 11 '12 at 15:02
@DJDavid98 With the help of that doc only, I have written above code.. BUT after reading that doc, I didnt understood how to do validations for other few things... BTW, could you please tell me where to add this method? from here: http://docs.jquery.com/Plugins/Validation/Validator/addMethod — Clarsen, Dec 11 '12 at 15:12
If you are validating only two fields, I recommend NOT using jQuery validation. You can easily write your own code to validate these two fields using regex. Its simple and gives you more insight on how validations work. Sorry for not answering your question though. — srijan, Dec 11 '12 at 15:12
@srijan He's also trying to make a telephone number field. But still, I agree. — SeinopSys, Dec 11 '12 at 15:14
You have to write a regular expression for number 1. Do some research, I don't think jQuery validate had a regular expression method built in. — Mike Legacy, Dec 11 '12 at 15:30
how to use this: http://docs.jquery.com/Plugins/Validation/Validator/addMethod ?? — Clarsen, Dec 11 '12 at 15:36
@Clarsen I will try to write you a validation code for the things you mentioned. I personally do not know this plugin, and can't really help you the way it is right now. — SeinopSys, Dec 11 '12 at 15:39
@DJDavid98 Thanks a lot for your trying! iam thinking to have a validation that shows error messages just besides that field instead of a popup.. is that possible..? — Clarsen, Dec 11 '12 at 15:43
`github` is not a `CDN` but yet you are linking to it in your `includes`... the incorrect `Mime` type will be a problem in some browsers when they try to download the `validation plugin` instead of loading it for use. [The proper `CDN` links are on this page](http://bassistance.de/jquery-plugins/jquery-plugin-validation/). Also note the file called "additional methods" on that same page... this is where the phone number validation rules are contained, so you need to [include this file](http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.min.js) too. — Sparky, Dec 11 '12 at 15:54
You also do not need to specify the function for `onfocusout` when this option is already activated by default. Just leave it out entirely to keep using it, or set it to `false` if it's not needed. — Sparky, Dec 11 '12 at 15:59
Your list of `regex` seems like pretty odd requirements for standard `email` and `fullname` fields. If that entire list is just for the item #6 `phone number` field, then you should have just specified that up front and also included the `phone number` field in your HTML and jQuery code. — Sparky, Dec 11 '12 at 16:06
It might have been much easier to just tell us which country's phone number you are trying to validate. Surely, there is already a valid/working Regex for this someplace online rather than re-creating from scratch. — Sparky, Dec 11 '12 at 16:09
@Sparky672 do you think I can try this: http://stackoverflow.com/questions/5203565/adding-a-rule-for-jquery-validation-plugin ??? BUT iam not understanding where to put jQuery.validator.addMethod ?? I mean in which file and where exactly I have to add it..? — Clarsen, Dec 11 '12 at 16:15
Yes, you could do something like that, but please read my several previous comments/questions as there is still much confusion caused by your question. — Sparky, Dec 11 '12 at 16:18
@Sparky672 Telephone field is just the last requirement.. Before requirements, related to FullName and - visitor location from a drop-down list which includes the items: South Yorkshire, Rest of England, Wales, Scotland, Northern Ireland, European Union, Rest of World, Other, and which includes an appropriate default, — Clarsen, Dec 11 '12 at 16:31
Sounds like you left a lot of critical details out of the question. — Sparky, Dec 11 '12 at 16:42

score 0 · Answer 1 · answered Dec 11 '12 at 16:18

0

Use regular expressions!!

only letters a to z (lower case), "-" (dash or hyphen) and " " (space) are allowed

!/[^a-z0-9 -]/.test(input)
the "-" (dash) AND " " (space) letters MUST be entered,

/ /.test(input) && /-/.test(input)
the "-" or the " " letter must not be either the first or the last letter entered,

!/^[ |-]|[ |-]$/.test(input)
"-" must not be the immediate neighbour or adjacent (before or after) to a " ",
"-" or " " must not be the immediate neighbour (adjacent) to itself.

!/ -|- |--| /.test(input)
The 'telephone' number field (4 digit area code, a space, 7 digit local code)

/^\d{4} \d{7}$/.test('1234 1234567')

Each one of this expressions return true if the condition is met, false otherwise, use it like this:

var input = $('some-selector').value();
if(
  !/[^a-z0-9 -]/.test(input) &&
  / /.test(input) && /-/.test(input) &&
  !/^[ |-]|[ |-]$/.test(input) &&
  !/ -|- |--|  /.test(input) &&
  /^\d{4} \d{7}$/.test(input )
){
   //do something
}

Better yet, if you are formatting phone numbers, remove all non-digit characters,

input = input.replace(/[^0-9]/,'')

count them (they must be 11)

input.length == 11

and then format them as you want.

answered Dec 11 '12 at 16:18

ButterDog

5,115
6
43
61

Please format your inline code by surrounding with tick marks ( ` ). – Sparky Dec 11 '12 at 16:20
@Xocatzin : Thanks for your code, could you please tell me how to get display error messages just besides the field, instead of in a popup format..? – Clarsen Dec 11 '12 at 16:40
@Xocoatzin hey, could you please tell me whats wrong in this code: http://jsfiddle.net/B5sd8/9/ ??? – Clarsen Dec 11 '12 at 17:49
You have to close all parenthesis and quotes. It's now working here http://jsfiddle.net/B5sd8/12/ Please note that the string MUST meet ALL the conditions in order to be valid as you specified (having space, - but not together or at any end of the string. – ButterDog Dec 11 '12 at 18:00
@Xocoatzin you're vm helpful bro... BUT iam still having 2 doubts: a) please check this: http://jsfiddle.net/B5sd8/15/ and where to add this: input = input.replace(/[^0-9]/,'') and input.length == 11 b) last validation needed: - visitor location from a drop-down list which includes the items: South Yorkshire, Rest of England, Wales, Scotland, Northern Ireland, European Union, Rest of World, Other, and which includes an appropriate default, sorry if iam troubling you! – Clarsen Dec 11 '12 at 23:13

Validation issues with JQuery

1 Answers1