CODEWITHSUNDEEP
javascriptjqueryajaxforms
user2766423
user2766423

Reputation: 167

Form Submitting Via AJAX Despite Failing Validation

I'm new to Ajax and I wanted to use it with a contact form currently in use. The form is set up to run JS (fieldchk()) to validate the require fields and then sends an email to the appropriate party.

I have set up the Ajax correctly, in that the email is sent and a message is displayed on the same page:

$('form').on('submit', function(event) {
    event.preventDefault();
    return fieldchk();
    var url = $(this).attr('action');
    var formData = $(this).serialize();
        $.post(url, formData, function(response){
            $('#feedback_form').html("<p>Thanks for contacting us!</p>");
        });
});

Edit: now the form gets validated and if it's valid, it does not send the email. Validation works correctly now.

Here is my form code:

<form 
    name="feedback" 
    action="feedbackact.cfm?type=feedback" 
    method="post"  
    enctype="multipart/form-data"
>

This is the code I use to validate the form:

function fieldchk() {
    errmsg = '';
    if (document.feedback.name.value == ''){
        errmsg = errmsg + 'You must enter your name.\n';
    }

    ... all the fields get checked like this ...

    if (errmsg > ''){
        alert(errmsg);
        return false;
    }
}

Upvotes: 0

Views: 109

Answers (1)

bencripps
bencripps

Reputation: 2053

You will need to add some type of validation in your JavaScript function. I would modify the markup 

<form 
    name="feedback" 
    action="feedbackact.cfm?type=feedback" 
    method="post"
    enctype="multipart/form-data"
>

You do not need the onsubmit because the event listener is already listening for the form name. I assume the feedbackact.cfm page is what is determining if the form is valid or not? If that's the case, you're probably going to need to pass the form values to the coldfusion.

However I would do this differently:

HTML:

<form name='feedback'><!--inputs--></form>

JavaScript:
$('form[name="feedback"]').on('submit', function() {

    var formData = this.serializeArray();

    if ( fieldcheck( formData) ) { //verifying the form data is correct

        $.post(); //post data

        Coldfusion.navigate("feedbackact.cfm?type=feedback");

    }

    else { alert('not filled out correctly!') }

});

Upvotes: 1

Related Questions