How to link submit button to another page after form validation?

Question

I am having trouble trying to link my submit button in my form to another page. Before sending the user to the new page, I want it to validate the form details, throwing the necessary errors if there are any. If there are no errors then it should send them to the next page where they are able to see a summary of their enquiry and then only submit it then.

Currently, my HTML code is:

                            <form id="myform" class="contact-form">

                                <label id="fullname">Full Name*</label> <br />
                                <input name="name" id="name" class="txt-form name" type="text" />

                                <label id="mail">Email*</label> <br />
                                <input name="email" id="email" class="txt-form email" type="email" />

                                <label id="cheap">Have you found this item cheaper on a competitor
                                    website?*</label><br />

                                <label>
                                    <input id="radio1" type="radio" name="radio" value="1">
                                    <label for="radio1"><span><span></span></span>Yes</label>

                                    <input id="radio2" type="radio" name="radio" value="2">
                                    <label for="radio2"><span><span></span></span>No</label> <br />
                                </label>


                                <div id="url">
                                    <label>Competitor URL</label>
                                    <input name="url_name" id="url-link" class="txt-form" type="url">
                                </div>

                                <label id="msg">Enquiry Message* <span id="characters">(0/200)</span></label>
                                <textarea name="message" id="message" class="txt-form message"
                                    type="textarea"></textarea>
                                <p id="asterisk">Fields marked with an *asterisk are compulsory</p>

                                <input type="submit" class=" btn" id="submit" value="Submit your enquiry">
                            </form>

JavaScript:

$(document).ready(function () {
    $('#myform').validate({
        rules: {
            name: {
                required: true,
            },
            email: {
                required: true,
            },
            radio: {
                required: true,
            },
            message: {
                required: true,
            },
            url_name: {
                required: true,
            },
        },
        messages: {
            name: {
                required: 'Please enter a valid name <br/>',
            },
            email: {
                required: 'Please enter a valid email <br/>',
            },
            radio: {
                required: 'Please select an option <br/>',
            },
            url_name: {
                required: 'Please enter a competitior URL',
            },
            message: {
                required: 'Please enter a message in your enquiry.',
            },
        },

        errorPlacement: function (error, element) {
            if (element.prop('type') === 'radio') {
                error.insertBefore(element);
            } else {
                error.insertBefore(element);
            }
        },
    });

    $('#message').keyup(function () {
        el = $(this);
        if (el.val().length >= 201) {
            el.val(el.val().substr(0, 200));
        } else {
            $('#characters').text('(' + el.val().length + '/200)');
        }
    });

    //Removes the default checked radio button, setting it to false
    $('input[name=radio]').attr('checked', false);
});

In my code, the form is running the validation however, when I click the submit button, it doesn't take me to the next page. When I add a link to the submit button, taking me to the next page, it doesn't perform the validation checks. So I am a bit confused right now. If anyone can help it'd be much appreciated. Thank you.

Answer 1

You should move to other page using action of form instead of href. Meanwhile perform your validation on your submit button. Following should fix your code:

<form id="myform" class="myclass" method=get action=".../nextpage.html">

And for button: <button type=submit onClick="validate('myform')" value=submit>

Js function for validation:

function validation(formid){
//perform your validations
if (valid)
    $("#formid").submit();
else
   alert("Validation error");
}

As for your validations, you can simple add required in your <input> tags instead of js like this <input name="name" id="name" class="txt-form name" type="text" required />

Answer 2

You need to have a method and action on your form as below

<form id="myform" class="contact-form" method = "post" action ="process.php">

Where process.php is a file containing your back-end logic.

If you don't have a reason for using js, you can use the required in the input field for validation.