Fatal编程技术网
  • jquery/
  • jQuery远程验证所有字段

jQuery远程验证所有字段

jquery ajax

jQuery远程验证所有字段,jquery,ajax,jquery-validate,Jquery,Ajax,Jquery Validate,我不接受PHP应用程序中的任何HTML，因此我打算阻止使用HTML标记提交的任何内容。我尝试添加以下JavaScript，以向所有文本输入字段添加额外的jQuery验证规则 我使用的是WordPressAjax，所以动作和url一起提交 $('input[type="text"]').each(function() { $(this).rules('add', { remote: { url: ajaxurl, type:

我不接受PHP应用程序中的任何HTML，因此我打算阻止使用HTML标记提交的任何内容。我尝试添加以下JavaScript，以向所有文本输入字段添加额外的jQuery验证规则

我使用的是WordPressAjax，所以动作和url一起提交

$('input[type="text"]').each(function() {
    $(this).rules('add', {
        remote:  {
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'ad_sanitize',
            }
        }
    });
});
上述js在Firefox控制台中返回错误

TypeError:a.data（…）未定义…如果（b）开关（d=a.data（j.form，“validator”）。设置，e=d.r…在Jquery中，js

上述操作将指向以下函数serverside

function isHtml($string) //This function just checks for html
{
    if ( $string != strip_tags($string) )
    {
        return true; // Contains HTML
    }
    return false; // Does not contain HTML
}

function ad_sanitize () { //<- This function calls when ajax call (Tested)

    foreach ($_POST as $key => $value) {
        if (isHtml($value) === true) {
            echo 'Only plain text allowed.';
        } else {
            echo true;
        }

    }
}

function isHtml（$string）//此函数只检查html
{
如果（$string！=带标签（$string））
{
返回true；//包含HTML
}
返回false；//不包含HTML
}
函数ad_sanitize（）{/$value）{
if（isHtml（$value）==true）{
回显“仅允许纯文本”；
}否则{
呼应真实；
}
}
}
问题：当我添加上述JavaScript时，我的jQuery验证将不再有效（表单未经验证就提交），当然，远程检查也不会被调用

问题：当我添加上述JavaScript时，我的jQuery验证将不再有效（表单未经验证就提交），当然，远程检查也不会被调用

这是因为您的JavaScript出现了一些语法问题，这些问题应该会触发JavaScript控制台错误：

  • 您将
    消息
    对象拼错为
    消息

  • 您的
    消息
    对象后缺少逗号

  • 您缺少
    submitHandler
    函数的结束括号

编辑：按照中的
数据
示例，使用函数

$('input[type="text"]').each(function() {
    $(this).rules('add', {
        remote:  {
            url: ajaxurl,
            type: 'POST',
            data: {
                action: function() {
                    return 'ad_sanitize';
                }
            }
        }
    });
});



$（文档）.ready（函数（）{
$（“#userForm”）.validate({
规则：{
姓名：{
要求：正确，
最小长度：3
},
电邮：{
要求：正确，
电子邮件：真的
},
密码：{
要求：正确，
最小长度：8
},
确认密码：{
要求：正确，
最小长度：8，
equalTo:“#密码”
},
性别：{
必填项：true
},
“爱好[]”：{
要求：正确，
最小长度：1
},
地址:{
要求：正确，
最小长度：10
},
国家编号：{
必填项：true
},
州编号：{
必填项：true
},
图片：{
必填项：true
}
},
信息：{
姓名：{
必需：“请输入有效名称”
},
电邮：{
必填：“请发送有效电子邮件”
},
密码：{
必需：“密码是必需的”
},
确认密码：{
必需：“此密码是必需的”，
equalTo:“请输入相同的密码”
},
性别：{
必填：“请选择您的性别”
},
“爱好[]”：{
必填：“请选择您的爱好”
},
地址:{
必填：“请输入您的地址”，
minlength:“最少10个字符”
},
国家编号：{
必填：“请选择一个国家”
},
州编号：{
必需：“请选择一个状态”
},
图片：{
必需：“请选择您的图像”
}
},
submitHandler:函数（userForm）{
insert（）；
}
});
});
$（文档）.ready（函数（）{
$（“#名称”）.keypress（函数（事件）{
var inputValue=event.charCode；

如果（！（inputValue>=65&&inputValue请注意您的JavaScript控制台错误。谢谢您，我的代码中的语法是正确的，但我在这里键入时可能出错。无论如何，您可以检查我更新的问题吗？我想添加新规则会有问题。该部分本身返回jquery错误，而没有该部分，我的整个js和ajaxes都工作正常@DaveTeu，请查看我更新的答案。您可能需要
数据
@DaveTeu中的函数，如果您不以JSON编码字符串的形式回显响应，
远程
方法绝对无法工作。@DaveTeu，今后发布代码时也请更加小心。每个人的时间都浪费在键入错误上，而不是解决问题真正的问题。我已经发布了真正的问题，问题是ajax甚至没有发布到我的服务器端php。Jquery validate没有阅读额外的规则。根据wordpress admin-ajax.php，属性“action”必须指向我的php文件中的函数。当我单击表单提交时，我没有看到远程工作。

$('#formname').validate({
    rules: {
        field1: 'required',
        field2: 'required',
    },
    messages: {   // <- "messages" was misspelled here
        field1: 'Required',
        field2: 'Required'
    },   // <- comma was missing from here
    submitHandler: function (form) {
        console.log('done');
    }    // <- closing brace was missing from here
});



function ad_sanitize () {

    foreach ($_POST as $key => $value) {
        if (isHtml($value) === true) {
            echo json_encode("Only plain text allowed."); // fail validation using this message
        } else {
            echo json_encode("true"); // pass validation
            // echo "true";  // also works the same (notice the quotes)
        }
    }

}



$('input[type="text"]').each(function() {
    $(this).rules('add', {
        remote:  {
            url: ajaxurl,
            type: 'POST',
            data: {
                action: function() {
                    return 'ad_sanitize';
                }
            }
        }
    });
});



<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script>
    $(document).ready(function() {
        $("#userForm").validate({
            rules: {
                name: {
                    required: true,
                    minlength: 3
                },
                email: {
                    required: true,
                    email: true
                },
                password: {
                    required: true,
                    minlength: 8
                },
                conform_password: {
                    required: true,
                    minlength: 8,
                    equalTo: "#password"
                },
                gender: {
                    required: true
                },
                "hobby[]": {
                    required: true,
                    minlength: 1
                },
                address: {
                    required: true,
                    minlength: 10
                },
                country_id: {
                    required: true
                },
                state_id: {
                    required: true
                },
                image: {
                    required: true
                }
            },
            messages: {
                name: {
                    required: "please valid enter name"
                },
                email: {
                    required: "please valid email"
                },
                password: {
                    required: "the password is required"
                },
                conform_password: {
                    required: "this conform password is required",
                    equalTo: "please enter same password"
                },
                gender: {
                    required: "please select your gender"
                },
                "hobby[]": {
                    required: "please select your hobby"
                },
                address: {
                    required: "please Enter your address",
                    minlength: "minimum 10 character"
                },
                country_id: {
                    required: "please select one country"
                },
                state_id: {
                    required: "please select one state"
                },
                image: {
                    required: "please select your image"
                }
            },

            submitHandler: function(userForm) {
                userForm.insert();
            }

        });
    });
    $(document).ready(function() {
        $("#name").keypress(function(event) {
            var inputValue = event.charCode;
            if (!(inputValue >= 65 && inputValue <= 120) && (inputValue != 32 && inputValue != 0)) {
                event.preventDefault();
            }
        });
    });
</script>



<h2>User Register Form</h2>

<form id="userForm" name="userForm" class="form-horizontal" action="" method="POST" enctype="multipart/form-data">
    <div class="form-group">
        <div class="form-group">
            <label for="name">Name : </label>
            <input type="text" name="name" id="name" placeholder="Enter Your Name">

        </div>

        <div class="form-group">
            <label for="email">Email : </label>
            <input type="email" name="email" id="email" placeholder="Enter Your Email">

        </div>
        <div class="form-group">
            <label for="password">Password : </label>
            <input type="password" name="password" id="password" placeholder="Enter Your Password">

        </div>
        <div class="form-group">
            <label for="conform_password">Conform Password : </label>
            <input type="password" name="conform_password" id="conform_password" placeholder="Enter Your Conform Password">

        </div>
        <div class="form-group">
            <label for="gender" class="radio-inline gender"><b class="gender">Gender : </b>
                <input type="radio" name="gender" id="gender" value="male">&nbsp; &nbsp;Male
            </label>
            <label for="gender" class="radio-inline">
                <input type="radio" name="gender" id="gender" value="Female">&nbsp; &nbsp;Female
            </label>

        </div>
        <div class="form-group">
            <label for="hobby" class="checkbox-inline"><b class="hobbies"> Hobby : </b>
                <input type="checkbox" value="cricket" name="hobby[]" id="cricket" value="cricket">&nbsp; &nbsp;Cricket
            </label>
            <label for="hobby" class="checkbox-inline">
                <input type="checkbox" value="hockey" name="hobby[]" id="hockey">&nbsp; &nbsp;Hockey
            </label>
            <label for="hobby" class="checkbox-inline">
                <input type="checkbox" value="horserace" name="hobby[]" id="horserace">&nbsp; &nbsp;Horse Race
            </label>

        </div>
        <div class="form-group">
            <label for="address">Address : </label>
            <textarea class="form-control" id="address" rows="3" name="address"></textarea>

        </div>
        <div class="form-group">
            <label for="country_id">Select Country : </label>
            <select name="country_id" id="country_id">
                <option value="India">--select country--</option>
                <option value="India">India</option>
                <option value="India">USA</option>
                <option value="India">Rusia</option>

            </select>

        </div>
        <div class="form-group">
            <label for="state_id">Select State : </label>
            <select id="state_id" name="state_id">
                <option value="">--select state--</option>
                <option value="">rajasthan</option>
                <option value="">gujarat</option>
                <option value="">kerla</option>
            </select>

        </div>

        <div class="form-group">
            <input type="file" name="image" id="image" size="20" />

        </div>

        <button class="btn btn-primary" type="submit" id="insert" value="submit" name="insert">Add Submit</button>
</form>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('select[name="country_id"]').on('change', function() {
            var countryId = $(this).val();
            if (countryId) {
                $.ajax({
                    url: "<?php echo base_url();?>index.php/Crud/fetch_state/" + countryId,
                    type: "GET",
                    dataType: "json",
                    data: {
                        country_id: countryId
                    },

                    success: function(data) {

                        $('select[name="state_id"]').empty();
                        $.each(data, function(key, value) {
                            $('select[name="state_id"]').append('<option value="' + value.state_id + '">' + value.state_name + '</option>');
                        });
                    }
                });
            } else {
                $('select[name="state_id"]').empty();
            }
        });`enter code here`
    });
</script>