CODEWITHSUNDEEP
jqueryformssubmitreturn
lucadesignedme
lucadesignedme

Reputation: 11

Form Submits even through jQuery returns false

The issue I am having is that the form still submits even though the code is made to return false if and or all of the fields are empty.

My HTML:

<form action="" method="post" name="contactForm" id="contactForm">
    <input type="text" name="contactName" id="contactName" class="contactTextfield" />
    <input type="text" name="contactPhone" id="contactPhone" class="contactTextfield" />
    <input type="text" name="contactEmail" id="contactEmail" class="contactTextfield" />
    <textarea name="contactMessage" id="contactMessage" class="contactTextarea" rows="5"></textarea>
    <input type="submit" name="contactSubmit" id="contactSubmit" value="Send"/>
</form>

My jQuery:

$("#contactForm").submit( function() {
    var contactName = $("#contactName").val();
    var contactEmail = $("#contactEmail").val();
    var contactMessage = $("#contactMessage").val();
    var emailFormat = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    if ( contactEmail != '' && emailFormat.test(contactEmail) ) {
        var contactEmailCheck = true;   
    }

    if ( contactName != '' ) {
        var contactNameCheck = true;
    }

    if ( contactMessage != '' ) {
        var contactMessageCheck = true;
    }

    if ( contactEmailCheck == true && contactNameCheck == true && contactMessageCheck == true ) {
        return true;
    } else {
        return false;
    }
});

FIXED:

Turned out it was not working because the jquery code was in the header of the index page while the form itself was only loaded onto the page via ajax from a separate html file. I had to place the jquery code inside the same file as the form.

Upvotes: 1

Views: 330

Answers (2)

Jeevan Patil
Jeevan Patil

Reputation: 6079

I would recommend this : Change your input type of Send button from 'Submit' to 'Button' first.

<input type="button" name="contactSubmit" id="contactSubmit" value="Send"/>

Bind a click event to this button in jquery document ready function or anywhere else you think is right. And on click of that Send button call a function where you do all validations and submit your form from there if everything is fine otherwise show errors or alerts.

#('#contactForm').click(function(){
    validateForm();
});

Also in your function written ro validate form has some scoping issues.

function validateForm() {
    var contactName = $("#contactName").val();
    var contactEmail = $("#contactEmail").val();
    var contactMessage = $("#contactMessage").val();
    var emailFormat = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    var contactEmailCheck = false;
    var contactNameCheck = false;
    var contactMessageCheck = false;

    if ( contactEmail != '' && emailFormat.test(contactEmail) ) {
        contactEmailCheck = true;
    }

    if ( contactName != '' ) {
        contactNameCheck = true;
    }

    if ( contactMessage != '' ) {
        contactMessageCheck = true;
    }

    if ( contactEmailCheck == true && contactNameCheck == true && contactMessageCheck ==     true ) {
        //submit form from here since everything is fine
        $('#contactForm').submit(); //contactForm is your form id
    } else {
        //show errors here & don't submit form
    }
}

Give it a try. Will work for sure.

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55750

This is a scoping issue.. Assign you variables outside the if statemenets..

Try this

$("#contactForm").submit(function() {
    var contactName = $("#contactName").val();
    var contactEmail = $("#contactEmail").val();
    var contactMessage = $("#contactMessage").val();
    var emailFormat = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    var contactEmailCheck = false;
    var contactNameCheck = false;
    var contactMessageCheck = false;
    if (contactEmail != '' && emailFormat.test(contactEmail)) {
        contactEmailCheck = true;
    }

    if (contactName != '') {
        contactNameCheck = true;
    }

    if (contactMessage != '') {
        contactMessageCheck = true;
    }

    if (contactEmailCheck && contactNameCheck && contactMessageCheck) {
        return true;
    } else {
        return false;
    }
});​

Upvotes: 1

Related Questions