关于JQuery验证方法

时间:2018-12-01 07:03:52

标签: jquery ajax jquery-validate

我有一个ajax请求,将从中提取多个记录。 然后从那个ajax,我将这些数据附加到表中。

因此,在那之后,我试图编辑该数据,因此,我用相同的名称填充了多个表单。并通过单击下面的按钮来提交数据时尝试验证特定行的形式是我的代码: -问题是validate方法在代码中无效,但在控制台中执行时有效。如果我做错了,谁能建议我做一个更好的方法呢?我正在尝试实现一种实时可编辑表格

<html>
<head>
<title></title>
</head>
<body>
<table class="table table-hover" id="attorney_partner_emails">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Email</th>
            <th scope="col">Notification</th>
            <th scope="col">Actions</th>
        </tr>
    </thead>
    <tbody id="tbodyid">
        <tr>
            <td class="">1</td>
            <td>
                <form name="updatepartnerForm">
                    <input type="email" name="user_email" class="partner_added_email disabled validate" disabled="disabled"
                        value="hussain@accident.com">
                    <input type="hidden" name="old_added_email" class="old_added_email disabled validate" disabled="disabled"
                        value="hussain@accident.com">
                </form>
            </td>
            <td>
                <div class="switch"><label> Off<input data-status="1" data-id="1" class="partner_sms_notification" type="checkbox"
                            checked=""><span class="lever"></span> On</label></div>
            </td>
            <td>
                <div class="btn-group btn-group-sm" role="group" aria-label="Basic example"><button type="button"
                        data-id="1" class="btn btn-primary btn-sm edit_partner"><i class="fa fa-pencil"></i></button><button
                        type="button" data-id="1" class="btn btn-danger btn-sm remove_partner"><i class="fa fa-remove"></i></button><button
                        type="button" data-id="1" name="update_partner" class="btn btn-success btn-sm update_partner d-none">save</button></div>
            </td>
        </tr>
        <tr>
            <td class="">2</td>
            <td>
                <form name="updatepartnerForm"><input type="email" name="user_email" class="partner_added_email disabled validate"
                        disabled="disabled" value="shkhussain12@gmail.com"><input type="hidden" name="old_added_email"
                        class="old_added_email disabled validate" disabled="disabled" value="shkhussain12@gmail.com"></form>
            <td>
                <div class="switch"><label> Off<input data-status="1" data-id="1" class="partner_sms_notification" type="checkbox"
                            checked=""><span class="lever"></span> On</label></div>
            </td>
            <td>
                <div class="btn-group btn-group-sm" role="group" aria-label="Basic example"><button type="button"
                        data-id="1" class="btn btn-primary btn-sm edit_partner"><i class="fa fa-pencil"></i></button><button
                        type="button" data-id="1" class="btn btn-danger btn-sm remove_partner"><i class="fa fa-remove"></i></button><button
                        type="button" data-id="1" name="update_partner" class="btn btn-success btn-sm update_partner d-none">save</button></div>
            </td>
        </tr>
    </tbody></table>


    <script type="text/javascript">
        $(document).on('click', '.update_partner', function () {
        current_form = $(this).parent().closest('tr').find('form[name="updatepartnerForm"]');


        var valid = current_form.valid();
        if (!valid) {
            return;
        }

        data = {
            partner_added_email: $(this).parent().closest('tr').find('input[name="user_email"]').val(),
            id: $(this).data('id')
        };
        data.csrf_token = $('input[name="csrf_token"]').val();
        url = siteURL + '/myaccount/update_attorney_contact_email';

        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            dataType: "json",
            success: function (response) {
                stopWaiting();
                if (response.status && response.status == "success") {
                    $(this).parent().closest('tr').find('input[name="old_added_email"]').val(response.updated_email);
                    $("#tbodyid").empty();
                    get_attorney_contacts();
                    toastr.success(response.message);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function (response) {
                stopWaiting();
                toastr.error('something went wrong');
            }
        });
    });


    $('form[name="updatepartnerForm"]').each(

    function(key,form){

        $(form).validate({
            onkeyup: false,
            errorElement: "span",
            errorClass: "invalid",

            rules: {
                user_email: {
                    required:true,
                    remote: {
                        type: 'post',
                        url: siteURL +'/myaccount/checkEmail_myAccount_contacs',
                        data: {
                            'csrf_token': $('input[name="csrf_token"]').val(),
                            'old_email': ''
                        },

                        dataType: 'json',
                        dataFilter:function(response){
                            try{
                            response = JSON.parse(response);
                                stopWaiting();
                                if(response && response=="1"){ // duplicate email

                                    return false;
        }else if(response.status && response.status == 'valid'){ 
                                    // continue registering email is valid when checked with x-verify_api
                                    return true;
        }else if(response.status && response.status == 'invalid'){
                                    return '"' + response.message + '"';
                                    //return false;

            }else if(response.status && response.status == 'ok'){

                                    return true;
                }else if(response.status && response.status == 'unknown'){


                                    return '"Try some other email"';
                                }
                            }catch(t){
                                return'"Please try again."'
                            }                               
                        },
                        beforeSend:function(){
                            pleaseWait();
                        }
                    }
                }
            },
            errorPlacement: function(error, element) {
                error.insertAfter(element);

            },
            success: function(label,element) {
                console.log(element.name);
                $(element.name).removeClass('invalid');             
            },
            messages: {
                user_email: {
                    required:'Enter you email',
                    remote:'Email already exists'
                }
            }
        });
    });
    </script>
</body>
</html>

0 个答案:

没有答案