Submitting Form after validation using javascript

Question

My form is somewhat like this:-

 <form id="form1" method="post" name="form1">
 //...fields like firstname, email......
 <button type="submit" id="submit" name="submit" onclick="validate(this)">SUBMIT</button>
 < /form>

The javascript validate function:-

function validate(ref)
{
    if(document.form1.firstname.value=="")
    {
            window.alert("First Name Cannot be Blank");
            return;
    }

    // validating other fields like email... If any field is invalid return 
    document.form1.action="response"
    document.form1.submit()
} 

Now what the problem is suppose I left the firstname field blank and click submit button then windows alerts that firstname field is mandatory....and as soon as I click the OK button in alert form the form is posted...

Now question is that I assign the action attribute after validating all the fields and if any one is invalid the function returns in which case action attribute of the form is not assigned then how the form is submitted.
The form should have been submitted after all the validation tests will have been successful and controls would have reached document.form1.submit(). And what is the solution for this.

I am using Python Flask and rendering template using jinja2.

Comments

Thank U to both of u...thanks a lot

Answer 1

I hope I understood your problem correctly try onclick="return validate(this);" in place of onclick="validate(this)" make sure you put ;.

Also you need to return false after the alert from JavaScript.

Answer 2

Use this modified JavaScript code

function validate(ref)
{
    if(document.form1.firstname.value=="")
    {
            alert("First Name Cannot be Blank");
            document.form1.firstname.focus();   //Highlights cursor to that form field
            return false;
    }
   else
   {
    return true;
   }
} 

This code must work.