Question

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/

Answer 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();
    });
}