表單驗證后如何將提交按鈕鏈接到另一個頁面？

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進行驗證。