Как связать кнопку отправки с другой страницей после проверки формы?

Question

Мне не удается связать кнопку отправки в моей форме с другой страницей. Перед отправкой пользователя на новую страницу я хочу, чтобы он проверил детали формы, выдав необходимые ошибки, если они есть. Если ошибок нет, он должен отправить их на следующую страницу, где они смогут увидеть сводку своего запроса, а затем только отправить его.

В настоящее время мой код HTML:

                            <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);
});

В моем коде форма выполняет проверку, однако, когда Я нажимаю кнопку отправки, это не переводит меня на следующую страницу. Когда я добавляю ссылку на кнопку отправки, переводящую меня на следующую страницу, проверка не выполняется. Так что сейчас я немного запутался. Если кто-то может помочь, это будет очень признательно. Спасибо.

Answer 1

У вас должен быть метод и действие в вашей форме, как показано ниже

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

Где process. php - это файл, содержащий ваш внутренний лог c.

Если у вас нет причин для использования js, вы можете использовать необходимое в поле ввода для проверки.

Answer 2

Вы должны перейти на другую страницу, используя действие формы вместо href. Тем временем выполните проверку на кнопке отправки. Следующее должно исправить ваш код:

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

И для кнопки: <button type=submit onClick="validate('myform')" value=submit>

Js функция для проверки:

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

Что касается ваших проверок, вы можете просто добавить required в свои теги <input> вместо js, как это <input name="name" id="name" class="txt-form name" type="text" required />