小编Spa*_*rky的帖子

一点背景:

我正在使用jQuery Validation插件来验证注册表单.我现在想要实现一个ajax调用来检查系统中是否有用户名,并且我想只有当userName值是有效的时才根据规则中的规则进行此ajax调用$(form).validate();

我想要的东西:

$("#userName").keyup(function () {
    if ($("#userName").isValid()) {
        //make ajax called
    }
});

我搜索了文档,但我找不到解决问题的方法.

我似乎无法使用以下部分视图进行客户端验证.此视图位于父视图中的divTSettings div内.从stackoverflow和其他网站尝试了很多东西,似乎没什么用.有任何想法吗？

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>


@using (Ajax.BeginForm("CreateT", "TAdmin", null,
        new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "divTSettings"},
                       new { id = "CreateTForm" }))
{
    <div>
        <label>Name:</label>
        <input type="text" name="tName" id="tName"/>
        @Html.ValidationMessage("tName")
        <input type="submit" value="Submit"/>
    </div>
}

<script type="text/javascript">
$(function() {
    $('#CreateTForm').validate({
        rules: {
            tName: {
                required: true
            }
        },
        messages: {
            tName: {
                required: 'Name required'
            }
        }
    });
    $("#CreateTForm").removeData("validator");
    $("#CreateTForm").removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse("#CreateTForm");
});
</script>

我正在使用jQuery Validation插件来验证复选框,因为它没有默认选项,应该选择One,并且可以选择最多两个复选框,这些是标准.我没有收到任何错误,也没有验证.我正在扩展它,如下所示,

  <input type="checkbox" name="test[]" />x
   <input type="checkbox" name="test[]"  />y
   <input type="checkbox" name="test[]" />z
     $("#formid").validate({
  rules: {
    test[]: { 

            required: function(elem)
            {
                return $("input.select:checked").length > 0;
            }

          },
messages: { 

    test[]: "You must check at least 1 box"
  }
 });

我有一个表单,我有一些字段,然后如果需要用户可以添加更多相同类型的字段.我使用http://jqueryvalidation.org/ validate插件来验证字段.

当我在某处阅读时,jquery validate plugin需要在字段中使用唯一的名称来验证它们.所以我将每个字段唯一命名.首先,我希望如果我使用类添加规则,validate插件将负责动态添加元素的验证.但事实证明它没有.

因此,即使每个字段的名称都是唯一的,验证插件也只验证最初呈现的第一个输入.

我甚至尝试使用$ .clone() ,希望它能处理所有事件绑定.但它对我没有用.所以我转向下划线重复标记,因为有多个字段,我不想在JS中编写模板并相应地命名.

我无法找到解决方案并坚持到这里.在此问题得到解决之前无法继续.

这是我写的JS.

$("#work_form").validate();

$(".work_emp_name").rules("add", {
    required: true
});

_.templateSettings.variable = "element";
var tpl = _.template($("#form_tpl").html());

var counter = 1;

$("form").on("click", ".add_employer", function (e) {
    e.preventDefault();
    var tplData = {
        i: counter
    };
    $("#word_exp_area").append(tpl(tplData));
    counter += 1;
});

请在小提琴设置中找到标记.

示例和代码在此处设置

我有一个表格,有大约50个字段和两个提交按钮,"SAVE"和"SAVE&SUBMIT".如果用户单击"保存",则仅验证某些值,例如.field1,field2.当用户点击"保存并提交"按钮时,它应验证所有50个字段并提交.

<form id="myform">
    <input type="text" name="field1" />
    <br/>
    <input type="text" name="field2" />
    <br/>
    <input type="text" name="field3" />
    <br/>
    <input type="text" name="field4" />
    <br/>
    <input type="submit" id="button1" value="Save" />
    <input type="submit" id="button2" value="Submit" />
</form>


$(document).ready(function () {

    $('#button1').click(function(){          
        $("#myform").validate({             
            rules: {
                field1: {
                    required: true                         
                },
                field2: {
                    required: true                        
                }
            },
            submitHandler: function (form) { // for demo    
                alert("data saved");
            }
        });
    }); 

    $('#button2').click(function(){
        $("#myform").validate({             
            rules: {
                field1: {
                    required: true                          
                },
                field2: {
                    required: true                           
                },
                field3: { …

以下是我目前用于尝试验证表单的内容.当我按下提交而没有在表单中输入任何值时,我会按预期获得每个输入的错误消息.但是,无论我在newpassword2或newemail2中放置什么,它们都不会"通过"验证.我已经尝试了从复制和粘贴到使其成为一个字母的所有内容都没有成功.也许我没有正确使用equalTo属性...

我还验证了选择器的所有名称都与表单上的输入ID一致.此外,所有输入都包含在表单中,因此表单标签之外没有任何内容(我读到这是其他人的问题).

$(document).ready(function() { 
    $("#account_data").validate({ 
        rules: { 
            newpassword1: { required: true }, 
            newpassword2: { equalTo: "#newpassword1" },
            newemail1: { required: true, email: true },
            newemail2: { equalTo: "#newemail1" }
        }
    }); 
});

任何帮助将非常感谢!

谢谢!!!

-Tom-

我想用Jquery的draggable来实现轻松的效果.但我没有在这个插件中找到该选项.所以我想知道是否有其他插件有这个选项 - 或一个简单的解决方案.

我试图实现的效果是这样的:http://www.fileden.com/files/2009/6/4/2466215/dragease.swf

正如您所看到的,在拖动时,由于缓和,图像移动感觉更平滑.我还想将拖动约束到一个轴,还需要使其恢复到它的位置.JQuery的draggable确实有最后两个选项,所以这很好.

示例代码已经为我提供了我想要的东西(除了缓动):http://jsfiddle.net/dandoen/NJwER/1/

任何建议将不胜感激.

干杯,丹多恩

我正在hijaxing现有的表单和POST到服务器.jQuery validate执行大部分验证,但如果验证在服务器上失败,我们将错误作为JSON返回给客户端.

以下是执行此操作的代码:

<script type="text/javascript">

    $(function () {

        $("form").submit(function (e) {
            var $form = $(this);
            var validator = $form.data("validator");

            if (!validator || !$form.valid())
                return;

            e.preventDefault();

            $.ajax({
                url: "@Url.Action("index")",
                type: "POST",
                data: $form.serialize(),
                statusCode: {
                    400: function(xhr, status, err) {                           
                        var errors = $.parseJSON(err);
                        validator.showErrors(errors);
                    }
                },
                success: function() {
                    // clear errors
                    // validator.resetForm();
                    // just reload the page for now
                    location.reload(true);
                }
            });
        });

    });

</script>

问题是如果POST成功,我似乎无法清除验证错误.我已经尝试过呼叫,validator.resetForm()但这没有区别,showError()呼叫添加的错误消息仍然显示.

注意我也使用jQuery.validate.unobtrusive插件.

我使用jQuery Validation插件来验证我的表单.我的问题是复选框的错误消息的位置.请看这个图像:

这是与复选框+ jQuery验证相关的html部分:

<fieldset id = "q8"> <legend class="Q8"></legend>
<label> What are your favourite genres of movies?<span>*</span></label>
<div class="fieldset content"> 

<style type="text/css">
 .checkbox-grid li {
 display: block;
 float: left;
 width: 25%;
}     
</style>

<ul class="checkbox-grid">
<li><input type="checkbox" name="q8[]" value="Action"><label for="checkgenre[]">Action</label></li>
<li><input type="checkbox" name="q8[]" value="Adventure"><label for="checkgenre[]">Adventure</label></li>
<li><input type="checkbox" name="q8[]" value="Comedy"><label for="checkgenre[]">Comedy</label></li>
<li><input type="checkbox" name="q8[]" value="Animation"><label for="checkgenre[]">Animation</label></li>
<li><input type="checkbox" name="q8[]" value="Drama"><label for="checkgenre[]">Drama</label></li> 
<li><input type="checkbox" name="q8[]" value="Romance"><label for="checkgenre[]">Romance</label></li>
  //Continued the same for OTHER CHECKBOXES 

</div>
</fieldset>

  //html for other questions...

 <input class="mainForm" …

我有一个预先存在的表单,我正在尝试添加jquery验证包含:

<form id="form" method="POST" action="/title/">
    {% csrf_token %}
<input type="hidden" name="id" value="6">
<input type="hidden" name="custom_checkbox_Electronic_Signature_man" value="1">
                            <p> <span class="style9">First Name </span>
                              <input type="text" name="first_name" value="" size="20" class="style7"><span class="style9">
                            Last Name </span>
                              <input type="text" name="last_name" value="" size="20" class="style7"><span class="style9">

使用jquery验证器插件,我添加了:

$('form').validate({
    rules: {
        first_name: {
            minlen: 3,
            maxlength: 15,
            required: true
        },
        last_name: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        email: {
          required: true,
          email: true
        },
         phone1: {
             required: true,
             phoneUS: true
          },
        phone2: {
             required: true,
             phoneUS: true …