使用Jquery插件和其他方法进行表单验证

阿比舍克·亚达夫(Abhishek yadav)

我想使用jquery插件仅在名称部分使用字母来验证我的表单。这样,当用户输入特殊字符或数字时会出现错误。我也想检查表单验证,因为用户键入信息即提交表单之前的实时验证。

//jquery validation
	
	// Wait for the DOM to be ready
$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("form[name='book']").validate({
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      fname: {
        required: true,
        lettersonly: true
        },
      lname:{
        required: true,
        lettersonly: true
        },
      email: {
        required: true,
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true
      },
     
    // Specify validation error messages
    messages: {
      fname: {
      required:"Please enter your firstname",
      lettersonly:"Letters allowed only"
      },
      lname: {
      required:"Please enter your firstname",
      lettersonly:"Letters allowed only"
      },
     
      email: "Please enter a valid email address"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});
<script src="design/bootstrap-3.3.7-dist/js/jquery.validate.js"></script>
<script src="design/bootstrap-3.3.7-dist/js/additional-methods.js"></script>

<form name="book" id="book" action="" method="post">

    <div class="row form-group">
        <div class="col-md-6 ">
            <label class="" for="fname">First Name</label>
            <input type="text" name="fname" id="fname" class="form-control" placeholder="First Name">
        </div>
        <div class="col-md-6">
            <label class="" for="lname">Last Name</label>
            <input type="text" name="lname" id="lname" class="form-control" placeholder="Last Name">
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-6 ">
            <label class="" for="date">Date</label>
            <input type="text" id="date" class="form-control datepicker px-2" placeholder="Date of visit">
        </div>
        <div class="col-md-6">
            <label class="" for="email">Email</label>
            <input type="email" name="email" id="email" class="form-control" placeholder="Email">
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-12">
            <label class="" for="treatment">Service You Want</label>
            <select name="treatment" id="treatment" class="form-control">
                <option value="">Hair Cut</option>
                <option value="">Hair Coloring</option>
                <option value="">Perms and Curls</option>
                <option value="">Hair Conditioning</option>
                <option value="">Manicure</option>
                <option value="">Pedicure</option>
                <option value="">Nails Extension</option>
                <option value="">Nail Design</option>
                <option value="">Waxing Eyebrows</option>
                <option value="">Waxing Hands/Legs</option>
                <option value="">Full Face Waxing</option>
                <option value="">Full Body/Body Parts Wax</option>
            </select>
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-12">
            <label class="" for="note">Notes</label>
            <textarea name="note" id="note" cols="30" rows="5" class="form-control" placeholder="Write your notes or questions here..."></textarea>
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-12">
            <center><input type="submit" value="Book Now" class="btn btn-primary btn-lg"></center>
        </div>
    </div>

</form>

我想使用jquery插件仅在名称部分使用字母来验证我的表单。这样当用户输入特殊字符或数字时会出现错误

阿比舍克·亚达夫(Abhishek yadav)

//jquery validation booking page
	
	// Wait for the DOM to be ready
$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("form[name='book']").validate({
	  //on key up validation
	  onkeyup: function(element) {
      $(element).valid(); 
    },  
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      fname: {
        required: true,
        lettersonly: true
        },
      lname:{
        required: true,
        lettersonly: true
        },
      email: {
        required: true,
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    // Specify validation error messages
    messages: {
      fname: {
      required:"Please enter your firstname",
      lettersonly:"Letters allowed only"
      },
      lname: {
      required:"Please enter your lastname",
      lettersonly:"Letters allowed only"
      },
      email: "Please enter a valid email address"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Django表单和javascript或其他方法

使用数组/其他方法进行优化

将array转换为interface {}进行切片,但结果不能使用len()和其他方法

验证reflect.Type的其他方法int和float64

jQuery 验证选择组合上的其他方法丢弃错误

使用其他方法改进for循环

如何使用其他方法的输入?

使用其他表单值验证表单

组织JQuery和其他插件的正确方法是什么?

如何使用其他方法来验证扫描仪输入?

使用 allOf 和其他属性进行 Swagger 数据验证

jQuery表单验证器插件和Ajax

如何使用Excel或其他方法修改参数以进行测试?

除了使用数据集进行xml读取外,还有其他方法吗

尝试使用来自atomsphere的jquery插件在流星表单提交上进行表单验证

使用选择的插件的JQuery验证表单进行Bootstrap 3验证状态

从物料清单进行物料分组的其他方法

Java:使用在其他方法和类的main方法中创建的数组

使用IN + AND或其他方式进行CAML查询

显示/隐藏基于其他表单输入和验证的表单元素的最佳方法?

在PHP中使用jQuery和Ajax进行表单验证

如何使用匹配功能或其他方法检索<span>和</ span>之间的多个单词?

JAVA 6不支持SNI,是否可以通过TLS验证和接受SSL证书的其他方法?

Androidplot错误:无法解析getGraphWidget和其他方法

使foo.sort()和其他方法返回

构造函数和其他方法的函数通信问题?

模拟其他方法

jQuery toggleClass,如果其他方法不起作用

尝试使用其他方法打印方法