Calling Javascript Validation Function Before Submiting And Calling Servlet

I am trying to validate the form and after that calling a servlet and it fails because form doesn't validete. I' ve pasted some code below. Could you give me some tips and help wit

Solution 1:

Change your javascript function as follows,

functionvalidateForm(event)
{
    event.preventDefault(); // this will prevent the submit event.if(document.loginform.username.value=="")
    {
      alert("User Name can not be left blank");
      document.loginform.username.focus();
      returnfalse;
    }
    elseif(document.loginform.password.value=="")
    {
      alert("Password can not be left blank");
      document.loginform.password.focus();
      returnfalse;
    }
    else {
        document.loginform.submit();// fire submit event
    }
}

Also, pass the submit event in the function call like this,

<formname="loginform"action="login"method="post"onSubmit="return validateForm(event);">

the approach provided by Crowder is good, but you might also have to handle the submit event being fired anyway if the validation fails.

DEMO FIDDLE

Solution 2:

You're using document.frm to refer to your form, but your form's name is loginform, not frm. So you want document.loginform if you want to rely on the automatically-created document properties.

I prefer not to rely on them. Instead, you might pass the form reference into your validation function:

<form...onSubmit="return validateForm(this);"...>

...and then use the argument in your function:

functionvalidateForm(frm)
{
    if(frm.username.value=="")
    {
      alert("User Name can not be left blank");
      frm.username.focus();
      returnfalse;
    }
    elseif(frm.pwd.value=="")
    {
      alert("Password can not be left blank");
      frm.password.focus();
      returnfalse;
    }
}

(Of course, there I'm still relying on automatic properties, in this case on the form object. If I wanted to really avoid them, I could use frm.querySelector("[name=username]") for the username field and frm.querySelector("[name=password]") for the password field. All modern browsers, and IE8, have querySelector. But at least only relying on the ones on the form is a bit more contained than worrying about everything that gets dumped on document.)

Here's your form and the code above in a snippet, with the action modified to take you to google.com (and the method modified to GET; both of those mods are just for the demo): Try it with a blank username or password, and you'll note that the form does not submit:

functionvalidateForm(frm)
{
  if(frm.username.value=="")
  {
    alert("User Name can not be left blank");
    frm.username.focus();
    returnfalse;
  }
  elseif(frm.pwd.value=="")
  {
    alert("Password can not be left blank");
    frm.password.focus();
    returnfalse;
  }
}

<formname="loginform"action="http://google.com/search?q=kittens"method="get"onSubmit="return validateForm(this);"><p> Enter user name: <inputtype="text"name="username"><br>
Enter password: <inputname="password"type="password"><br><inputtype="submit"></p></form>