I am having problems getting my form to validate or submit

Question

My form does not seem to be validating or submitting. It was submitting and validating before, but the Jquery error messages were not all displaying at the same time so I had to edit the code, and now it is not submitting or validating at all.

Here is my JS:

function validateUserName(user)
{
    var u = document.forms["NewUser"]["user"].value
    var uLength = u.length;
    var illegalChars = /\W/; // allow letters, numbers, and underscores
    if (u == null || u == "")
    {
        return "You Left the Username field Emptyyy";
    }
    else if (uLength <4 || uLength > 11)
    {
        return "The Username must be between 4 and 11 characters";

    }
    else if (illegalChars.test(u)) 
    {
        return "The Username contains illegal charectors men!";
    }
    else
    {
        return "";
    }
}

function validatePassword(pwd)
{
    var p = document.forms["NewUser"]["pwd"].value
    var cP = document.forms["NewUser"]["confirmPwd"].value
    var pLength = p.length;
    if (p == null || p == "")
    {
        return "You left the password field empty";
    }
    else if (pLength < 6 || pLength > 20)
    {
        return "Your password must be between 6 and 20 characters in length";
    }
    else if (p != cP)
    {
        return "The passwords do not match!"
    }
    else
    {
        return "";
    }
}

function validateEmail(email)
{
    var e = document.forms["NewUser"]["email"].value
    var eLength = e.length;
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
    var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;

    if (eLength == "" || eLength == null) 
    {

        return "You left the email field blank!";
    } 
    else if (e.match(illegalChars)) 
    {

        return "ILEGAL CHARECTORS DETECTED EXTERMINATE";
    } 
    else 
    {
        return "";
    }
}
function validateFirstName(fname)
{
    var f = document.forms["NewUser"]["fName"].value;
    var fLength = f.length;
    var illegalChars = /\W/;

    if(fLength > 20)
    {
        return "First Name has a max of 20 characters";

    }
    else if (illegalChars.test(f))
    {
        return "Numbers,letter and underscores in first name only";

    }
    else 
    {
        return "";
    }


}

function validateLastName(lName)
{
    var l = document.forms["NewUser"]["lName"].value;
    var lLength = l.length;
    var illegalChars = /\W/;

    if(lLength > 100)
    {
        return  "Last Name has a max of 100 characters";
    }
    else if (illegalChars.test(f))
    {
        $("#ErrorLname").text("Numbers,letter and underscores in last name only";
    }
    else 
    {
        return "";
    }


}

function validateForm()
{
/*

   valid = true;
    //call username function
    valid = valid && validateUserName();

    //call password function
    valid = valid && validatePassword();

    //call email function
    valid = valid && validateEmail();

    //call first name function
    valid = valid && validateFirstName();

    //call first name function
    valid = valid && validateLastName();

    return valid;
*/


    var error = "";
    //call username function
    error += "\n"+validateUserName();

    //call password function
    error += "\n"+validatePassword();

    error += "\n"+validateEmail();

    error += "\n" + validateFirstName();

    error += "\n" + validateLastName();

    if(error === ""){
        return true;
    }
    else{
         $("#ErrorUser").text(error);
         $("#ErrorEmail").text(error);
         $("#ErrorFname").text(error);
         $("#ErrorPassword1").text(error);
         $("#ErrorLname").text(error);
         return false;

    }

}

  $('#your-form').submit(validateForm);

Fiddle: http://jsfiddle.net/cyKgD/

Why dont u put console messages or alert messages..if u see nothing then it is a JS error after submitting the form — Rajeev, May 18 '13 at 14:32
Solving this is what the Javascript debugger is for. What have you done to investigate? — Barmar, May 18 '13 at 14:35
check the line `$("#ErrorLname").text("Numbers,letter and underscores in last name only";` there is one bracket `)` is missing .. — Bhavesh G, May 18 '13 at 14:38
Not meaning to just echo the other commenters - have you tried using firebug? https://getfirebug.com/ - It's a Firefox plugin that (among other things) will show all JavaScript errors, with the line. — JSP64, May 18 '13 at 14:39
Yes There is a debugger option in chrome where u can say console.log("messages"); — Rajeev, May 18 '13 at 14:44
@user2396852 yes, in chrome (and most browsers) press F12 and open the Sources tab, there you can set breakpoints in the javascript and start debugging. — Klas Mellbourn, May 18 '13 at 14:54
Chrome's Firebug alternative: http://stackoverflow.com/questions/4146598/chromes-alternative-for-firebugs-evaluation-console — JSP64, May 18 '13 at 15:20

score 1 · Accepted Answer · answered May 18 '13 at 14:54

1

You had few errors in your code.

The validateForm() is never being called
Line 174: Should be else if (illegalChars.test(l))
Line 113: Closing bracket missing

This fiddle seems to be working now, http://jsfiddle.net/u5565/

Make sure that jQuery is included in your page. The line of code

$(function() {
  $('#your-form').submit(function() {
     return  validateForm(); 
 });
});

tells jQuery to validate the form when it is submitted.

answered May 18 '13 at 14:54

pseudoh

161
4

Wow thanks, it is almost working for me now. Only problem is that all the error messages are showing up on each form field instead of only the applicable message, do you know how I could fix this? And the form is not submiting when everything is correct? – entropy May 18 '13 at 15:05
For this to work, you have to check each field's corresponding error independently. Then check that no error occurred for all of them, if an error does occur, then get the message of the corresponding validation function and apply it to the error element next to each field. I've updated the fiddle, http://jsfiddle.net/u5565/1/, however IMO this is a quick and dirty way of validating, it works fine, but you may need to reimplement it a bit more effectively. – pseudoh May 18 '13 at 15:19
You have been a great help, thank you :) – entropy May 18 '13 at 15:30

score 0 · Answer 2 · answered May 18 '13 at 15:18

0

In your fiddle, you forgot method="POST" on the form tag

<form name = "NewUser" id = "your-form" method="POST">

answered May 18 '13 at 15:18

Klas Mellbourn

42,571
24
140
158

I am having problems getting my form to validate or submit

2 Answers2