javascript - IE でのブートストラップ入力検証

Question

ブートストラップを使用すると、必要に応じて入力を指定したり、データ型と必要なパターンを定義したりできます。残念ながら、これは IE 10 より前のどのバージョンの IE でも機能しません。

IEが不足しているギャップをカバーするために、入力に割り当てられた属性をピックアップして読み取ることができるjavascript検証プラグインを知っている人はいますか?

Answer 1

私は同じ問題に遭遇し、次のプラグインを使用しましたが、かなりうまく機能しています。

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;
                }
        }); 
});