JS Function for Form Validation

Question

I would appreciate some help with this form I'm working on. The form itself came out really well; however the validation lets anything pass through. When I intentionally violate every condition in the validation function separately (or together, in case I mixed up "true" and "false" on my returns, which it doesn't appear I did), absolutely nothing happens, when I should be getting an alert and the form should be blocked from submitting.

UPDATE: My first problem has been solved and I updated accordingly, leaving a comment at the area that ruined the script. I would still appreciate ways to shorten the script. In addition, I have a new problem. I am trying to use regEx to prevent users from entering non-alphabetic and non-whitespace characters; however, my code is ignoring the phrase Jas@n X, which also draws my attention to the fact that I also need more code to prevent people from entering their initials (whether first, last, or both). It feels like the problem is with the .test(name).

<html>
 <head>
  <script type="text/javascript" src="jquery.js"></script>
  <script>
   function validateForm() {
    var x = document.forms["Involved"]["name"].value;
    if (!x) { //Here I now want to eliminate the possibility of ints or special characters. Preferably I have alternate error messages when a special/int is entered
     alert("Please enter your full name");
     return false;
    }
    if (/[^a-zA-Z\s:]+/.test(name)) {
     alert("Please refrain from using non-alphabetical characters.");
     return false;
    }
    if (!/[A-Z][a-z]+\s[A-Z][a-z]+/.test(name)) {
     alert("Please enter a real name.")
     return false;
    }
    if (x.split(" ").length < 2) { // I misplaced parentheses here, making it "else if ((x.split " ".length < 2)) {", which broke the script. 
     alert("Please enter your first name as well as your last name.");
     return false;
    }
    var y = document.forms["Involved"]["email"].value;
    if (!y) {
     alert("Please enter an email address.");
     return false;
    }
    var atpos = y.indexOf("@");
    var dotpos = y.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=y.length) {
     alert("Please enter a valid email address.");
     return false;
    }
    var z = document.forms["Involved"]["help"].value;
    if (!z) {
     alert("Please let us know how you intend to help.");
     return false;
    }
    return true;
   }
  </script>
 </head>
 <body>
  <form name="Involved" method="post" action="" onsubmit="return validateForm();">
   Name: <br><input type="text" name="name" title="Your full name" style="color:#888" placeholder="Enter full name"/>
   <br><br>
   Email: <br><input type="text" name="email" title="Your email address" style="color:#888" placeholder="Enter email address"/>
   <br><br>
   How you can help: <br><textarea cols="18" rows="3" name="help" title="Service you want to provide" style="color:#888" placeholder="Please let us know of any ways you may be of assistance"></textarea>
   <br><br>
   <input type="submit" value="Submit" id=submitbox"/>
  </form>
 </body>
<html>

use placeholder instead value. w3schools.com/Tags/att_input_placeholder.asp — meni181818
– meni181818, Commented Jul 30, 2014 at 19:40
@meni181818 Thank you! I will take care of it. A few things: 1) Does it have any non-aesthetic effect on the code, or does it just make it easier to read/reference? 2) Adding on to [1], does doing this mean that I can take out the parts of my code that say if (varname) == "What I put as a prompt in the field at the bottom"? 3) A variant of [2]; will this render the value as null and fall under the, simpler, condition if (varname)? — Bucephalus
– Bucephalus, Commented Jul 30, 2014 at 20:03
the Answer for all the questions is: placeholder It is not Affects the value. the value Will stay "". so you dont have to check if the value == to the Default (placeholder) — meni181818
– meni181818, Commented Jul 30, 2014 at 20:12
@meni181818 Thank you for everything! Have a good rest of the day. — Bucephalus
– Bucephalus, Commented Jul 30, 2014 at 20:20

score 1 · Accepted Answer · 2014-07-30 20:31:36Z

1

You have javascript error in this line, you can see it if you open developer tools in your browser:

else if ((x.split " ".length < 2)) {
// Uncaught SyntaxError: Unexpected string

there is wrong parentheses placement, should be

else if (x.split(" ").length < 2) {

Additional edits that you can do with your code:

Do not include jQuery library if you really don't need it:

<script type="text/javascript" src="jquery.js"></script>

You shouldn't use javascript for filling default input values, there is nice HTML5 attribute placeholder, so you can use it and change your inputs from this:

<input type="text" name="name" title="Your full name" style="color:#888" value="Enter full name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />

to simply this:

<input type="text" name="name" title="Your full name" placeholder="Enter full name"/>

For javascript code in general: if you do return when if statement is true, you can continue writing your else code without wrapping it in else statement, for example:

function check() {
    var a = 1;

    if (a != 2) {
        return false;
    }
    else {
        if (a != 3) {
            return false;
        }
        else {
            return true;
        }
    }
}

can be changed to more readable:

function check() {
    var a = 1;

    if (a != 2) {
        return false;
    }

    if (a != 3) {
        return false;
    }

    return true;
}

edited Jul 30, 2014 at 20:31

answered Jul 30, 2014 at 19:35

user555121

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

4 Comments

Bucephalus Over a year ago

It works perfectly--thanks a lot! It's amazing what a pair of parentheses can do. Is there any way to shrink my code further, or is that pretty much it?

Bucephalus Over a year ago

So is a return true line even necessary? If not, should I keep it in just to be safe (like a * {misc styling} in HTML) or just chuck it?

Bucephalus Over a year ago

Also, does the placeholder element also work for mobile browsers?

user555121 Over a year ago

In your case return true is not necessary, as it doesn't change behaviour of form submission, but you can leave it to clarify result of function execution. placeholder is supported by modern mobile browsers, details can be found here: caniuse.com/input-placeholder

Elena · Accepted Answer · 2014-07-30 19:39:06Z

0

The problem is here (it's probably a typo). You are missing braces after split here:

else if ((x.split " ".length < 2))

instead you shoud write x.split(" ").
You also don't need to use double braces here (it doesn't prevent code from working though).

The other advice: you can use just if (varName) instead of if (varName == null || varName == "" ) here.

Also, maybe it is excessive, but since you say you are new to js: it is always helpful to look in browser console if something doesn't work as expected. There was an exception with a number of line where it occured, and thi is how I found the error.

answered Jul 30, 2014 at 19:39

Elena

3992 silver badges7 bronze badges

10 Comments

Bucephalus Over a year ago

Thank you! You're right, I have not been using developer tools--so that wasn't excessive at all. I will download a set as soon as I can. So if (varname) means "if varname has no value?" Also, does it work with other conditions, such as if (varname) || varname=="lorum ipsum"?

Elena Over a year ago

@Bucephalus You are welocme! if (varname || varname=="lorum ipsum") will be correct, as the whole condition of the if-statement should be in braces. And good news: you don't need to download developer tools, they are built-in in chrome and FF. Just press F12

Elena Over a year ago

I forgot one thing. if (varname) will work if varname evaluates to fasle. For example, undefined, empty string, NAN. You can look up what converts to false here

Bucephalus Over a year ago

That makes sense; thanks. Your "NaN" reminded me: is there a test I can add that proves they're not inputting numbers?

Elena Over a year ago

@Bucephalus Yes, you can use regExp for that. To check if the string includes numbers or maybe some other symbols you don't wont in it (such as special symbols in name :))

|

Collectives™ on Stack Overflow

JS Function for Form Validation

2 Answers 2

4 Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related