Форма проверки JQuery, но не кнопка «Отправить»

Question

Я использую плагин JQuery.Validation для проверки некоторых полей в форме, но я не хочу использовать кнопку submit, я хочу использовать только <input type="button"> и после нажатия JQuery нажать кнопку моего контроллера, единственное, что это не кнопка submit, поэтому, даже если поля неверны или не проверены, он будет вызывать контроллер, даже если значения полей неверны, потому что я использую событие .click() JQuery при нажатии этой кнопки, я хочу, чтобы У меня неправильные значения в полях, и проверка показывает сообщение об ошибке не вызывать мой контроллер действий, даже если кнопка нажата, как я могу достичь этого? Это мой html код:

<script src="~/js/jquery.validate.js"></script>
<form action="post" class="rightform newsletter" id="formSubscription">
    <div class="title">
        <img src="http://ligresources.blob.core.windows.net/public/UK/Content/Images/newsletter.png" alt="">NEWSLETTER
    </div>
    <input type="text" id="txtFullName" name="fullName" placeholder="Full name" required>
    <input type="email" id="txtEmail" name="email" placeholder="Email address" required>
    <button type="button" id="btnSubscription" data-url="@Url.Action("SubscriptionEmail","Email")" style="background-color:#f66804;">SUBSCRIBE TO NEWSLETTER</button>                
</form>

Это JQuery.Validation plugin код:

$(document).ready(function () {
    $("#formSubscription").validate({
        rules: {
            email: {
                required:true,
                email:true
            },
            fullName: {
                required:true
            }
        },
        messages: {
            email: {
                required: "Please enter an email address",
                email: "Please enter a valid email address"
            }
        }
    });
});

И это функция JQuery, которую я должен на время выбросить, когда btnSubscription равен clicked:

$(document).ready(function () {
    $("#btnSubscription").click(function () {
        SendSubscription();          
    }),
    return false;
}),

function SendSubscription() {       
    $.ajax({
        type: "post",
        url: $("#btnSubscription").data("url"),
        data: { fullName: $("#txtFullName").val(), emailAddress: $("#txtEmail").val() },
        success: function () {
            alert("email sent")
        },
        error: function () {
            alert("An error occurred..")
        }
    });
}

javascript jquery html twitter-bootstrap validation

4

AlexGH 13 Дек 2016 в 17:34

Answer 1

После того, как вы настроите свой .validate(), все, что вам нужно сделать, это вызвать метод .valid() в вашем обработчике .click(). Это то, что submit делает автоматически, но вы можете вызвать его вручную с помощью метода .valid().

3

Chase 13 Дек 2016 в 15:00

Answer 2

Вставьте if в функцию SendSubscription:

if (yourValidationDidntPass) {
  //do whatever you want
}
else {
  $.ajax({...});
}

0

Mayday 13 Дек 2016 в 14:39

Answer 3

Вы должны использовать тип submit, а затем вы можете использовать submitHandler для управления другими вещами, которые вы хотите сделать, например:

$("#formSubscription").validate({
  submitHandler: function(form) {
    // do other things for a valid form
    form.submit();
  }
});

Посмотрите на документацию: https://jqueryvalidation.org/validate/

1

Jordi Flores 13 Дек 2016 в 14:38

Форма проверки JQuery, но не кнопка «Отправить»

3 ответа

Похожие вопросы

Новые вопросы

javascript