Question

我弹出一个用户输入电子邮件的地方：

<form class="form" id="PopupEmailForm">
            <div id="PopupEmail" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body">
                            <a data-dismiss="modal">Close</a>
                            <p>Enter The Email:</p>
                            <input type="email" id="EmailInput" name="Email" placeholder="name@example.com" required="required" />
                            <input type="submit" value="Send" id="PopupEmailSubmit" />
                        </div>
                    </div>
                </div>
            </div>
        </form>

在提交时，我正在执行以下操作：

$('#PopupEmailSubmit').click(function () {

    $.ajax({
        type: "POST",
        url: "controller/action",
        data: {
            Email: $('#EmailInput').val()
        },
        beforeSend: function () {
            $("#PopupEmailSubmit").prop('disabled', true); 
            $.growl({
                title: "Email Confirmation",
                message: "Sending Email..."
            });
        },
        success: function (res) {
            if (res) {
                $.growl.notice({ title: "Email Confirmation", message: "Email Sent!" });
                $('#PopupEmail').modal('hide');
            } else {
                $.growl.error({ title: "Email Confirmation", message: "Email Not Sent. Try again later." });
            }
            $("#PopupEmailSubmit").prop('disabled', false); // enable button

        }
    });
});

我想在调用ajax post方法之前对电子邮件输入进行验证。

我希望验证与<input type="email"/>

的HTML5验证类似（内联）

任何人都可以提供帮助

Answer 1

由于您使用的是表单，因此您也可以在表单的submit事件中执行此操作，而不是单击按钮

$('#PopupEmailForm').submit(function (event) {
  event.preventDefault();
  //ajax call here

});

Answer 2

试试这个：

museum_amenities

在Ajax调用之前验证输入

2 个答案: