表单验证后如何将提交按钮链接到另一个页面？

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

您应该使用表单操作而不是 href 移动到其他页面。 同时在您的提交按钮上执行您的验证。 以下应该修复您的代码：

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

对于按钮： <button type=submit onClick="validate('myform')" value=submit>

js function 进行验证：

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

至于您的验证，您可以在<input>标签中简单地添加required ，而不是像这样的<input name="name" id="name" class="txt-form name" type="text" required />

Answer 2

您需要在您的表单上有一个方法和操作，如下所示

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

其中 process.php 是一个包含后端逻辑的文件。

如果没有使用js的理由，可以在输入字段中使用required进行验证。