Javascript name validation

Question

I have a javascript function written to validate a field on my form. This function is supposed to make sure the field is not empty, does not exceed the limit of 35 characters and only contains alphabetic characters and a hyphen(-). I had code to make sure the field is not empty and that it does not exceed 35 characters which worked fine but i added code to validate the field to the usable characters and i tested it out by leaving the field empty to make sure that still worked but when i hit the submit button the function didn't seem to validate at all, didn't give me an alert and just submitted. Here is my code:

function validateFamily()
{
var family=document.getElementById('family');
var stringf = document.getElementById('family').value;
if (family.value=="")
    {
     alert("Family name must be filled out");
     return false;
    }
else if (document.getElementById('family').value.length > 35)
    {
        alert("Family name cannot be more than 35 characters");
        return false;
    }
else if (/[^a-zA-Z\-\]/.test( stringf ))
    {
        alert("Family name can only contain alphanumeric characters and hypehns(-)")
        return false;
    }
    return true;
}

<form name="eoiform" method="POST" action="<?php echo $_SERVER["PHP_SELF"];?>" id="eoi" onsubmit="return validateFamily() && validateGiven() && validateMaleFemale() && validDate() && validateAddress() && validatePost() && validateParent() && validateWork() && validateHome() && validateMob() && validateCheckBoxes();">

<b>Student's Family Name</b> 
<br>
<input type="text" id="family" name="family" /><?php echo $strmsgf; ?>

<input type="submit" name="submit" id="submit" value="submit" />

</form>

Could anyone show me how to fix my code?

does an alert("Alert"); in the beginning of validateFamily() function works? — konnection
– konnection, Commented May 30, 2013 at 14:40
The console log in your browser is something that you may want to take a look for debugging this type of situation, what does it show? — konnection
– konnection, Commented May 30, 2013 at 14:42
@konnection if you mean "Family name must be filled out" than if i take out the usable character validation code than yes it works just fine but currently it doesn't. — AJJ
– AJJ, Commented May 30, 2013 at 14:48
@konnection also how would i bring up the console? i am using chrome to view my form. — AJJ
– AJJ, Commented May 30, 2013 at 14:49

15ee8f99-57ff-4f92-890c-b56153 · Accepted Answer · 2013-05-30 15:23:43Z

3

Your regular expression is broken. You've escaped the closing square bracket around the character set. Try this:

else if (/[^a-zA-Z0-9\-]/.test( stringf ))

Also, there's a lot of weird clutter in there that's annoying but not fatal: How many times do you really need to call getElementById('family') in that method? Once.

if (stringf=="")
{
    alert("Family name must be filled out");
    return false;
}
else if (stringf.length > 35)
{
    alert("Family name cannot be more than 35 characters");
    return false;
}
else if (/[^a-zA-Z0-9\-]/.test( stringf ))
{
    alert("Family name can only contain alphanumeric characters and hypehns(-)")
    return false;
}
return true;

answered May 30, 2013 at 15:23

15ee8f99-57ff-4f92-890c-b56153

37.1k7 gold badges68 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

F-3000 Over a year ago

There's a lot of weird clutter in there that's annoying but not fatal: You can get rid of those series of return false;-lines, if you add else{return true} at the end of else ifs and change last boolean to false. (The sarcasm here is just plain joking)

konnection · Accepted Answer · 2013-05-30 15:19:23Z

1

UPDATED:

Sorry, the problem is with your regex, i missed that, change to this its fully working:

  var ck_password =  /^[A-Za-z0-9-]/;

            if(!ck_password.test(stringf))
            {

                alert("Family name can only contain alphanumeric characters and hypehns(-)")

            }

Console in chrome, go to the OPTIONS in the right top coner, select TOOLS, then DEVELOPER TOOLS.

edited May 30, 2013 at 15:19

answered May 30, 2013 at 14:59

konnection

4334 silver badges13 bronze badges

1 Comment

konnection Over a year ago

try now, or just change your regex to the one in my answer in your own code. hope it helps

Aliaksei Shytkin · Accepted Answer · 2013-05-30 14:47:57Z

0

Try to rename submit button, rid of id and name "submit" (rename to "doSubmit" or smth), it can cause problems and conflict with event "submit" of form.

answered May 30, 2013 at 14:47

Aliaksei Shytkin

4254 silver badges8 bronze badges

1 Comment

F-3000 Over a year ago

Such conflict would be serious bug in a browser.

Collectives™ on Stack Overflow

Javascript name validation

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related