Проверка формы не работает перед отправкой с помощью метода ajax

Question

Я создаю форму отправки с помощью ajax, но не могу проверить форму перед отправкой ..

Я использую codeigniter 3 с jquery validate

мой код работает, но мне нужно установить форму, такую ​​как минимальная длина, формат электронной почты и т. Д.

этот мой код раньше (с входным классом = "обязательным")

    $(document).ready(function(){  
        $(".save_post").click(function(){

                 if ($("#post_val").valid()) {
                        $("#post_val").submit();
                     }else{
                         return false;
                     }

                var data = $('.post_form').serialize();
                $.ajax({
                        type: 'POST',
                        url: "<?= base_url() ?>admin_ajx/post_ajx/update_post",
                        data: data,
                        success: function(data) {                                                                             

                            alert("Post Success!");


                        }                                    
                    });
                });
            });

Я пытаюсь изменить этот код к этому, но код не работает

   $(document).ready(function(){  
        $(".save_post").click(function(){

                    $('#post_val').validate({ 
                            rules: {
                                title: {
                                    required: true,
                                    minlength: 10
                                },
                                image: {
                                    required: true,
                                    minlength: 5
                                }
                            },
                            messages: {
                                title:{
                                    required: 'title error',
                                    minlength: 'kurang dari 10'
                                },
                                image: {
                                    required: true,
                                    minlength: 5
                                }
                            }
                        });

                var data = $('.post_form').serialize();
                $.ajax({
                        type: 'POST',
                        url: "<?= base_url() ?>admin_ajx/post_ajx/update_post",
                        data: data,
                        success: function(data) {                                                                             

                            alert("Post Success!");


                        }                                    
                    });
                });
            });

моя форма, как это

        <form action="<?= base_url() ?>admin/add-post" method="POST" role="form" class="post_form" id="post_val">
            <input type="text" name="title" class="form-control" placeholder="Title" id="post_title" onkeyup="auto_alias();">
            <input class="form-control input-sm required" type="text" name="image" id="img_url" readonly="readonly" onclick="openKCFinder(this)"  style="cursor:pointer" />         
            <a class="btn btn-sm btn-info save_post" onClick="CKupdate();$('#article-form').ajaxSubmit();">POST</a>           
        </form> 

Я ожидаю, я могу проверить эту форму перед отправкой

Answer 1

Вы используете jquery validate в неправильной манере.

Для начала вы не вкладываете проверку в событие щелчка, а затем не запускаете свой код отправки независимо.Вместо этого вы запускаете его в обратном вызове submit для validate.

Пример выглядит следующим образом:

$("#ajax-contact-form").validate({
        errorClass: "text-danger",
        rules: {
            name: {
                required: true,
            },
            phone: {
                required: false,
                digits: true,
                minlength: 7,
            },
            email: {
                required: true,
                email: true,
            },
            message: {
                required: true,
                minlength: 10,
            },
        },
        submitHandler: function (form, e) {
            e.preventDefault(); // important to prevent issues!!!
            $("#contact-button").html('Sending...');
            var str = $(form).serialize(); // to get your serialized form
            $.ajax({
                type: "POST",
                url: base_path + "/contact/send",
                data: str,
                dataType: 'json',
                success: function (data) {
                    var result = '';
                    if (data.status === 'success') {
                        $(form).trigger('reset');
                        result = '<div class="alert alert-success"><i class="fa fa-check"></i> ' + data.msg + '</div>';
                    } else {
                        result = '<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + data.msg + '</div>';
                    }
                    $("#contact-button").html('Send Message');
                    $('#note').html(result);
                    setTimeout(function () {
                        $("#note").fadeOut();
                    }, 8000);
                }
            });
        },
    });

также я бы удалил $('#article-form').ajaxSubmit(); из этого onClick="CKupdate();$('#article-form').ajaxSubmit();".Он не содержит ссылки на текущий код и не будет работать с validate.