CODEWITHSUNDEEP
javascriptjqueryformsvalidation
Bucephalus
Bucephalus

Reputation: 13

JS Function for Form Validation

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>

Upvotes: 1

Views: 359

Answers (2)

user555121
user555121

Reputation:

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;
}

Upvotes: 1

Elena
Elena

Reputation: 399

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.

Upvotes: 0

Related Questions