IE中的Bootstrap输入验证

时间:2013-06-15 10:29:29

标签: javascript jquery internet-explorer twitter-bootstrap

Bootstrap允许用户根据需要指定输入,以及定义数据类型&要求的模式。遗憾的是,这在IE 10之前的任何版本的IE中都不起作用。

有没有人知道一个javascript验证插件,它只能拾取和读取分配给输入的属性,以弥补IE不足的空白?

1 个答案:

答案 0 :(得分:0)

我遇到了同样的问题,我使用了以下插件,它工作得很好。

Official Plugin Page

http://jqueryvalidation.org/

GitHub

https://github.com/jzaefferer/jquery-validation

CDN

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js

EXAMPLE CODE:

它可以像AJAX一样轻松使用:(如果你想要没有AJAX,只需编辑那部分)

<form id="example_form" action="process.php" method="POST" novalidate="novalidate">
<span style="display: none;" id="success">Success</span>
<span style="display: none;" id="failure">Failure</span>

<label for="Name">Name:<br> 
                    <input type="text" id="txtName" required="" class="required">
                </label>
<label for="Phone">Contact No:<br> 
                    <input type="tel" id="txtPhone" required="" class="required number">
                </label>
<label for="Email">Email:<br> 
                    <input type="email" id="txtEmail" required="" class="required email">
                </label>
<button type="submit">Submit</button>
</form>


  $(function()
  {

var form = $("#example_form").validate();
$("form#example_form").submit(function() {
                    if(form.valid())
                    {
                        var name = $("#txtName").val();
                        var email = $("#txtEmail").val();
                        var phone = $("#txtPhone").val();

                        $.ajax({
                        url: "process.php",
                        type: "POST",
                        data: {
                                'name': name,
                                'email': email,
                                'phone': phone
                                },
                        dataType: "json",
                        success: function(data) {
                              if(data.status == 'success')
                              {
                                    $('#success').show();
                              }
                              else if(data.status == 'error')
                              {
                                    $('#failure').show();
                              }
                            }
                        });
                return false;
                }
        }); 
});