标签: jquery-validate

我正在使用Jquery验证.

目前,我有一个用户名,我要为此用户名验证的是:

• 不是空白
• 可用性

• 没有空格,我添加这个方法:

  $.validator.addMethod("nowhitespace", function(value, element) {
       return this.optional(element) || /^\S+$/i.test(value);
  }, "  No white space please");
  

  Run Code Online (Sandbox Code Playgroud)

• 字母数字

  $.validator.addMethod("alphanumeric", function(value, element) {
       return this.optional(element) || /^[a-zA-Z0-9]+$/i.test(value);
  }, "  Alphanumeric. Only numbers and alphabet allowed");
  

  Run Code Online (Sandbox Code Playgroud)

• 第一个字符必须是字母,不能是数字.

我被困在最后的验证中.如何编写正则表达式来验证第一个字符必须是字母？

BTW:

没有空白似乎有问题.我试过我的脚本,1允许空格,但不允许2个空格,为什么？

我正在使用NicEdit作为我的MVC3项目中的页面的wysiwig JS编辑器.我想要一个编辑器的字段是textarea,它是一个"必需"字段.

问题是客户端JQuery验证没有"看到"在nicEdit textarea中输入的内容(因为nicEdit完全改变了页面并且textarea IS为空).我该如何解决这个问题？有没有办法用编辑框的值立即填充textarea？我可以以一种很好的方式挂钩JQuery验证,以便保持"不引人注目"吗？

谢谢

这是一个奇怪的.我有这样的设置..

<form id="main">
    <input name="title" class="required">
    <form id="searchIngredient">
          <input name="search">
          <input type="submit" name="submit" value="Search">
    <form>
    <input type="submit" name="submit" value="Add New Recipe">
</form>

现在我尝试使用class ="required"来验证#main表单中的输入,但是在表单中使用第二个#serachIngredient表单,验证根本不起作用.

您想知道:#searchIngredient表单使用ajax返回结果,并且由于设计,它需要在#main表单内.

我知道jQuery验证在没有#searchIngredient表单的情况下工作,但是一旦我将其添加回来,它就会停止工作,没有错误.

任何建议的解决方法或提示？

我正在使用jquery validate插件进行表单验证.我看到了取消功能的奇怪之处.我有一个包含一个电子邮件字段,一个提交按钮和一个取消按钮的表单.当我在电子邮件字段中键入不完整的地址,然后单击取消时,验证程序将检查电子邮件字段,显示该字段旁边的无效邮件,并终止取消操作.

我在这里找到了一个相关的问题:jQuery Validation插件:禁用指定提交按钮的验证.它看起来完全像我需要的.但它不起作用!我将"取消"css类添加到我的取消按钮,但它没有效果.

此示例代码演示了我看到的问题.我在FF和Chrome中都看到了这种行为.

在此示例中,当我在文本输入中键入无效的电子邮件地址,然后在单击其他任何内容之前单击取消按钮时,验证程序将在文本输入旁边显示一条消息,并且永远不会发生取消操作.如果我再次单击取消,页面将按预期重新加载.这意味着要取消页面,我实际上必须单击取消两次.

<script type="text/javascript">
    $(document).ready(function () {
        $("#myForm").validate()

        $(".cancel").click(function () {
            location.reload(true)
        })

    })
</script>

<div>
    <form name="myForm" id="myForm" action="index.html">
        <input type="text" class="required email" id="myField" name="myField"/>
        <input type="submit" value="Submit"/>
        <input type="submit" value="Cancel" class="cancel"/>
    </form>
</div>

同样有趣的是:我尝试运行jquery validate文档中的演示(http://docs.jquery.com/Plugins/Validation/Reference#Skipping_validation_on_submit).当我运行演示时,我无法确定验证是否正常 - 电子邮件字段永远不会被标记为无效,即使我输入gobbledygook并单击提交按钮.我得到的只是一个简单的警报,已添加到表单的submitHandler中.取消按钮的行为方式相同,所以我无法判断添加取消类是否有效.

我用FF和Chrome运行它.我正在使用jquery 1.9.1和jquery-validate 1.11.4.

我正在使用jQuery Validation Plugin,我希望能够errorElement根据有错误的元素类型动态确定.我知道你可以errorElement这样:

$("form").validate({
    errorElement: "div"
});

但是,我希望能够更改它,以便如果类型是复选框或单选按钮,那么我可以创建errorElement一个li.有谁知道如何做到这一点？谢谢!

我有一个表单,我使用jQuery验证从前端进行验证.

大多数验证都按照我的要求进行.但是,对于复选框,验证不起作用.我在验证jquery中有以下规则和消息

  $('#submitDetails').validate({
    // 1. validation rules.
    rules: {
    ......
    ......
    ......
      custom9: {
        required: true
      },
      custom10:{
          required:true
      },
      custom11: {
        required: true
      }
    },
    // 2. Validation fail messages
    messages: {
      custom9: {
        required: "You can only claim your Plush Rewards once you have received all your items found on your reciept"
      },
      custom10: {
        required: "You must agree to the terms of conditions in order to claim your Plush Rewards Prepaid Visa Gift Card"
      },
      custom11: { …

显示错误消息时,JQuery验证插件使用该{number}格式作为传递给规则的参数的占位符.(例如this field must be between {0} and {1} characters)

但是,我无法找到一种方法,使用数组将字段名称传递给全局范围中的消息$.validator.messages.

而不是静态:

this field is required

我想传递类似的东西:

the {fieldname} field is required

在我的服务器端框架:attributeLaravel中,plcaheholder服务于此目的.这个插件是否支持此功能？

我有一个简单的表单和一个"保存"按钮.我想仅在用户单击按钮时使用JQuery验证插件验证字段.在用户单击"保存"按钮之前,我不希望错误消息显示或消失.有解决方案吗

我正在使用jQuery Validation插件,它工作得很好 - 但是,在我使用引导按钮附加组件的字段上,当显示所需的警报时,按钮不随文本框一起移动 - 我已经复制了问题在这里:jsfiddle

这是html:

<form id="frmPO" action="" method="get" runat="server">
<div class="form-group input-sm">
            <div class="row">
                <div class="col-sm-6">
                    <label for="txtClientContract">
                        Client Contract</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="txtClientContract" runat="server" required/>
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" id="btnClientContracts" >
                                ...</button>
                        </span>
                    </div>
                  </br>
           <div class="row">
                <div class="form-group col-sm-4">
                    <button id="btnSavePO" type="button" class="btn btn-default">
                        Create Purchase Order</button>
                </div>
            </div>
                </div>
  </div>
  </form>

任何帮助将不胜感激,谢谢

当错误替换输入select2显示在框上方时，我希望错误替换框下方。这是我的HTML：

<form id="form" class="form_required">
    <select type="text" id="test1" class="form-control select2" required>
        <option value="">&nbsp();</option>
        <option value="1">1</option>
    </select>
    <button type="button" onclick="insert()">Submit</button>
</form>

这是JavaScript：

$('.select2').select2()

$(".form_required").validate({
    highlight: function (element, errorClass, validClass) {
        $(element).parents('.form-control').removeClass('has-success').addClass('has-error');     
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).parents('.form-control').removeClass('has-error').addClass('has-success');
    },
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        }
        else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {
            error.insertAfter(element.parent().parent());
        }
        else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
            error.appendTo(element.parent().parent());
        }
        else {
            error.insertAfter(element);
        }
    }
});

function insert(){ …