'OnSubmit Javascript not overriding submit action

I am trying to build a website with a webform. I am using Godaddy's default webform PHP and I am not sure how to validate the form for required fields.

I want the user to not be able to submit the form prior to validation. I found JavaScript files online submitted by other users that address this problem but I can not seem to get it to work.

<script language="javascript" type="text/javascript">
function checkForm() {
    if (form.FirstName.value == "") {
        alert("Please enter your first name");
        form.FirstName.focus();
        return false;
    }

    if (form.LastName.value == "") {
        alert("Please enter your last name");
        form.LastName.focus();
        return false;
    }
    var email = form.email.value;
    if (email.indexOf('@') == -1) {
        alert("Plelase enter valid email");
        form.email.focus();
        return false;
    }
    return true;
}
</script>

Below is the form:

<form onsubmit="return checkForm()" action="/webformmailer.php" method="post"> 
<input type="hidden" name="subject" value="Submission" /> 
<input type="hidden" name="redirect" value="thankyou.html" />
<span>First Name:</span><br>
<input type="text" name="FirstName"/><br>
<span>Last Name:</span><br>
<input type="text" name="LastName" /><br>
<span>*Email:</span><br>
<input type="text" name="email" /><br>
<span>*Comments:</span><br>
<textarea name="comments" cols="40" rows="10">
</textarea><br>

<input type="submit" name="submit" value="submit"/> <span id ="required">*required field</span>
<input type="hidden" name="form_order" value="alpha"/> <input type="hidden" name="form_delivery" value="daily"/> <input type="hidden" name="form_format" value="html"/>

I tried submitting without entering anything and it redirects me to the thank you.

javascriptphphtmldom-events


Solution 1:[1]

form is not defined in the function. There are several ways to handle this. The simplest would be to change return checkForm() to return checkForm(this) and

function checkForm(form) {

Solution 2:[2]

In the form, change checkForm() to checkForm(this). Then, in your javascript, change function checkForm() { to function checkForm(form) {

Maybe this will help.

Solution 3:[3]

You forgot 2 thing: first, please add name="form" into 

<form name="form" onsubmit="return checkForm()" action="/webformmailer.php" method="post">

second, you misstake close form, please add this code to end of HTML

</form>

Your HTML will look like:

<form name="form" onsubmit="return checkForm()" action="/webformmailer.php" method="post"> 
    <input type="hidden" name="subject" value="Submission" /> 
    <input type="hidden" name="redirect" value="thankyou.html" />
    <span>First Name:</span><br>
    <input type="text" name="FirstName"/><br>
    <span>Last Name:</span><br>
    <input type="text" name="LastName" /><br>
    <span>*Email:</span><br>
    <input type="text" name="email" /><br>
    <span>*Comments:</span><br>
    <textarea name="comments" cols="40" rows="10"></textarea><br>
    <input type="submit" name="submit" value="submit"/> 
    <span id ="required">*required field</span>
    <input type="hidden" name="form_order" value="alpha"/> 
    <input type="hidden" name="form_delivery" value="daily"/> 
    <input type="hidden" name="form_format" value="html"/> 
</form>

1 other thing is in javascript, function to check email address is incorrect, Correct is:

var email = form.email.value;
var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;

if (!email.match(re) || !email) {
  // incorrect email address
}

New script will be:

<script language="javascript" type="text/javascript">
function checkForm() {
    if (form.FirstName.value == "") {
        alert("Please enter your first name");
        form.FirstName.focus();
        return false;
    }

    if (form.LastName.value == "") {
        alert("Please enter your last name");
        form.LastName.focus();
        return false;
    }
    var email = form.email.value;
    var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;

    if (!email.match(re) || !email) {
        alert("Plelase enter valid email");
        form.email.focus();
        return false;
    }
    return true;
}
</script>

Goodluck!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Explosion Pills
Solution 2 Rob W
Solution 3 Mr Jerry

Related Questions