Проверять поля с помощью проверки JQuery без отправки?

У меня есть веб-приложение HTML5 с многочисленными введенными пользователем полями, и я хотел бы сделать некоторую проверку на стороне клиента в этих полях в javascript перед отправкой их на сервер. Легко ли? Просто используйте плагин проверки JQuery --- http://jqueryvalidation.org/

Но есть улов. У моего веб-приложения нет форм. В HTML не присутствует нигде. Вместо этого есть обработчик изменений JQuery для каждого изменяемого пользователем элемента, и когда пользователь меняет значение одного из этих элементов, выполняется вызов AJAX. (Эта нестандартная архитектура взаимодействия с пользователем имеет смысл для этого приложения.)

Я хотел бы проверить поле перед вызовом AJAX и использовать плагин проверки JQuery для этого. Но я не могу понять, как это сделать.

Можно ли использовать плагин проверки JQuery без отправки в любом месте? Как мне это сделать? Или другой подход лучше?

Ответ 1

Во-первых, и самое главное, вы должны обернуть ваши элементы ввода внутри тегов <form></form> для работы плагина jQuery Validate. Однако кнопка отправки не требуется.

Во-вторых,, вы можете запрограммировать триггер проверки работоспособности любого или всех элементов без кнопки отправки с помощью метода .valid().

$(document).ready(function() {

    $('#myform').validate({  // initialize the plugin on your form.
        // rules, options, and/or callback functions
    });

    // trigger validity test of any element using the .valid() method.
    $('#myelement').valid();

    // trigger validity test of the entire form using the .valid() method.
    $('#myform').valid();

    // the .valid() method also returns a boolean...
    if ($('#myform').valid()) {
        // something to do if form is valid
    }

});

DEMO: http://jsfiddle.net/URQGG/

Ответ 2

Вам придется обернуть ваши поля в форме, чтобы использовать плагин проверки и хорошую практику. Кроме того, вы можете запрограммировать проверку плагина программно и проверить, действительна ли форма:

var $form = $('#your_form'),
    validator = $form.validate({...});

//validate the form
validator.form();

//check if the form is valid 
if ($form.valid()) {
    //form is valid
}

Дополнительные параметры см. в docs.

Ответ 3

Я создал немного помощника. Просто добавьте эту строку кода, а затем вы можете использовать любую кнопку в любом месте.

$("body [data-submit-form]").on("click", function (event) {
    $("#" + $(event.target).data('submit-form')).valid();
});

<form id="component-form">

</form>

<button data-submit-form="component-form">Button</button>

Объяснение: Код jquery прослушивает все клики по элементу с атрибутом 'data-submit-form', в прослушиватель извлекается атрибут data и затем я запускаю действительный метод в соответствующей форме.

ПРИМЕЧАНИЕ. Если вы хотите отправить форму, если форма действительна, используйте этот код:

$("body [data-submit-form]").on("click", function (event) {
    var form = $("#" + $(event.target).data('submit-form'));
    if (form.valid()) {
        form.submit();
    }
});

Ответ 4

Используйте этот код для двух примеров полей электронной почты и пароля: -

<head>
    <script src="jquery-3.4.0.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #txt1{

        margin-left:23px;
        border-radius: 12px;
       }
       #txt2{
        border-radius: 12px;
       }
       #btn1{
        border-radius: 12px;
        width: 8em;  height: 2em;
        cursor:pointer;
        background-color: #008CBA;
       }
       #lbl1,#lbl2{
        font-family: "Comic Sans MS", cursive, sans-serif;
        color:red;
       }
    </style>
</head>

<body>
    <div class="container">
        <form>
            <center> <label id="lbl1">Email: </label><input type="text" id="txt1"></center></input><br>
            <center><label id="lbl2">Password: </label><input type="password" id="txt2"></center></input>
            <br><br>
            <center><input type="button" id="btn1" name="btn1" value="Login" style="color:darkblue;font-size:15px;"></center></input>
        </form>

    </div>
    <script>
        $(document).ready(function () {
            $('#btn1').click(function () {
                var email = $('#txt1').val();
                var pass = $('#txt2').val();
                if (email == '') {
                    $('input[type="text"]').css("border", "2px solid red");
                    $("#txt1").parent().after("<div class='validation' style='color:red;margin-left:93px;'><center>Please enter email address</center></div>");
                    alert("hi");
                }
                else {

                }
                if (pass == '') {
                    $('input[type="password"]').css("border", "2px solid red");
                    $("#txt2").parent().after("<div class='validationp' style='color:red;margin-left:70px;'><center>Please enter password</center></div>");
                }
                $('input[type="text"]').keydown(function () {
                    $('input[type="text"]').css("border", "");
                    $(".validation").remove();
                });
                $('input[type="password"]').keydown(function () {
                    $('input[type="password"]').css("border", "");
                    $(".validationp").remove();

                });

            });
        });

    </script>
</body>

</html>

Ответ 5

Просто вызовите метод отправки формы, используя jquery

$("#formId").submit()

Это подтвердит всю форму, так же, как когда мы нажимаем кнопку отправки