5

The following checks an item code submitted through an input composed of 35 characters consisting of letters A-F and numbers 0-9, as well as three dashes ("-"). An example of a valid item code would be this: 16FA860F-E86A457B-A28A238B-2ACA6E3D

//Checks the item code to see if it meets requirements
if($("#input").val().length > 35) {
    $("#errorLogContent").prepend("The item code <font color='#FFFFFF'>" + itemCode + "</font> is too long.<br>");

    $("#ise").each(function(){
    this.reset();
    });
}
else if($("#input").val().length < 35) {
    $("#errorLogContent").prepend("The item code <font color='#FFFFFF'>" + itemCode + "</font> is too short. Be sure to include dashes.<br>");

    $("#ise").each(function(){
    this.reset();
    });
}
else if($("#input").val().match(/([^A-Fa-f0-9-]+)/gm)) {
    $("#errorLogContent").prepend("The item code <font color='#FFFFFF'>" + itemCode + "</font> contains invalid characters.<br>");

    $("#ise").each(function(){
    this.reset();
    });
}

else if($("#input").val().match(/[-]/g, "").length > 3) {
    $("#errorLogContent").prepend("The item code <font color='#FFFFFF'>" + itemCode + "</font> is an invalid format. Please only use 3 dashes.<br>");

    $("#ise").each(function(){
    this.reset();
    });
}
else if($("#input").val().match(/[-]/g, "").length < 3) {
    $("#errorLogContent").prepend("The item code <font color='#FFFFFF'>" + itemCode + "</font> is an invalid format. Please include 3 dashes.<br>");

    $("#ise").each(function(){
    this.reset();
    });
} 

else {
 //Rest of my code
}

The following works well, except for if an item code is 35 characters long, but contains no dashes. If it contains 1 or 2 dashes, then this code catches it, but if it contains 0, then it just hangs and does nothing. I've tried just about everything, but can't seem to figure out what a solution could be. Since the length is null, it just hangs.The part that should be tweaked somehow is this:

else if($("#input").val().match(/[-]/g, "").length > 3) {
    $("#errorLogContent").prepend("The item code <font color='#FFFFFF'>" + itemCode + "</font> is an invalid format. Please only use 3 dashes.<br>");

    $("#ise").each(function(){
    this.reset();
    });
}
else if($("#input").val().match(/[-]/g, "").length < 3) {
    $("#errorLogContent").prepend("The item code <font color='#FFFFFF'>" + itemCode + "</font> is an invalid format. Please include 3 dashes.<br>");

    $("#ise").each(function(){
    this.reset();
    });
} 

I'm sure the solution is an easy one, but I'm stumped.

EDIT: Here's how I've got everything laid out for the most part, except for the CSS. http://jsfiddle.net/86KcG/1/

10
  • 4
    Looks like you're way overcomplicating this. Is the format always the same? That is, are the - always in the same position? One regular expression will do the job... Oct 14, 2012 at 21:26
  • which condition should kick in if length is 35 ??
    – charlietfl
    Oct 14, 2012 at 21:28
  • @Michael Yes, but I'm not too worried about checking that right now, though it'd be nice. I'm focused on making sure there are always three dashes in the code, and if there's not, give an error message. It works if there's only 1 or 2, but if there's none, then it does nothing.
    – Matthew W.
    Oct 14, 2012 at 21:29
  • @jfriend00 Actually jQuery doesn't have a reset() method unless it was just added in 1.8. $("#ise")[0].reset(); would be more appropriate
    – charlietfl
    Oct 14, 2012 at 21:31
  • .length won't ever be null. The return from match() could be null in which case you'll get an error if you try to check the length property (but length itself will always be either an integer from 0 up or undefined).
    – nnnnnn
    Oct 14, 2012 at 21:34

2 Answers 2

1

You can fix your code by using a regex somehow like this on

/^[A-F0-9]+\-[A-F0-9]+\-[A-F0-9]+\-[A-F0-9]+$/

Where ^ and $ match the input begin and end, and groups of characters A-F and 0-9 with the constraint that a dash is separated by at least one character of group A-F or 0-9.

Combining this check with a length check for 35 characters makes your code work.

//Checks the item code to see if it meets requirements
if($("#input").val().length != 35) {
    $("#errorLogContent").prepend("The item code <font color='#FFFFFF'>" + itemCode + "</font> is too long/short.<br>");

    $("#ise").each(function(){
        this.reset();
    });
}
else if(!(/^[A-F0-9]+\-[A-F0-9]+\-[A-F0-9]+\-[A-F0-9]+$/.test($("#input").val()))) {
    $("#errorLogContent").prepend("Insert some dashes and make sure the required pattern...<br>");

    $("#ise").each(function(){
        this.reset();
    });
}
1
  • This is what worked best for me. nnnnnn's solution kept giving me an error, probably my fault though. Though I did end up using nnnnnn's regex.
    – Matthew W.
    Oct 14, 2012 at 23:44
0

.length won't ever be null. The return from match() would be null if there wasn't a match, in which case you'll get an error if you try to check the length property since null doesn't have properties, so you need to test for that (but length itself will always be either an integer from 0 up or undefined).

So you can say:

else {
    var matches = $("#input").val().match(/[-]/g);  // note: match() only takes one parameter
    if (matches != null && matches.length > 3) {
       $("#errorLogContent").prepend("The item code <font color='#FFFFFF'>" + itemCode + "</font> is an invalid format. Please only use 3 dashes.<br>");

       $("#ise").each(function(){
          this.reset();
       });
    }
}

For your less than 3 test you'd say:

if (matches === null || matches.length < 3)

...to cater for when there are no matches (return of null), or some matches but less than 3.

If the correct value always follows the pattern of 16FA860F-E86A457B-A28A238B-2ACA6E3D, i.e., groups of 8 letters or numbers separated by dashes, then you can do this:

if (!/^[0-9A-F]{8}-[0-9A-F]{8}-[0-9A-F]{8}-[0-9A-F]{8}$/i.test($("#input").val()) {
   // invalid, do something...
}

The regex .test() method returns true or false depending on whether the supplied string matched.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.