CODEWITHSUNDEEP
javascriptformsvalidation
user3120015
user3120015

Reputation: 181

Return false does not prevent form submission

I have form that I need to validate using JavaScript and I need to show all the messages at the same time. E.g if the first name and surename is missing for two messages to appear. I've got this working with the below code but the form is still being returned back to the server. P Lease see below:

function validateForm() {
    var flag = true;
    var x = document.forms["myForm"]["firstname_4"].value;
    if (x == null || x == "") {
        document.getElementById("fNameMessage").innerHTML = "First name is  required";
        flag = false;
    } else {
        document.getElementById("fNameMessage").innerHTML = "";
    }

    var x = document.forms["myForm"]["surname_5"].value;
    if (x == null || x == "") {
        document.getElementById("sNameMessage").innerHTML = "Surename is required";
        flag = false;
    } else {
        document.getElementById("sNameMessage").innerHTML = "";
    }
    var y = document.forms["myForm"]["selectid"];
    if (y.options[y.selectedIndex].value == "Title") {
        document.getElementById("titleMessage").innerHTML = "You need to select a title";
        flag = false;
    } else {
        document.getElementById("titleMessage").innerHTML = "";
    }

    return flag;
}

My form and event :

<form action=""method="post" accept-charset="UTF-8" name="myForm" onsubmit="return validateForm();">

My Button:

<input type="submit" class="button" name="submit" id="submit" value="Submit">

Upvotes: 0

Views: 279

Answers (3)

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146340

Your code:

var y = document.forms["myForm"]["selectid"];
if (y.options[y.selectedIndex].value == "Title")

... triggers an exception and you don't catch it:

Uncaught TypeError: Cannot read property 'options' of undefined

Thus JavaScript code stops running.

Upvotes: 1

Joel Kinzel
Joel Kinzel

Reputation: 970

Since everyone seems to be providing jQuery answers and I didn't see anything in your orignal code that was jQuery-esque I'll assume you aren't using jQuery.

You should be using the event.preventDefault:

Sources:

https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.submit 

document.getElementById("submit").addEventListener(
     "click", validateForm, false
);
function validateForm(){

    // We should not assume a valid form! 
    var formValid = false;

    // All your validation code goes here

    if(formValid){
        document.forms["myform"].submit();
    }

}

Upvotes: 1

Works On Mine
Works On Mine

Reputation: 1121

try something like

if(flag){
   document.getElementById("submit").submit();
} 
else{
   $('#submit').click(function (e) {
      e.preventDefault();
   });
}

Upvotes: 0

Related Questions