Bootstrap input validation in IE

Question

Bootstrap allows one to specify an input as required, as well as defining a data type & required pattern. Sadly, this doesn't work in any version of IE prior to IE 10.

Does anybody know of a javascript validation plugin which can just pickup and read the attributes assigned to inputs to cover the gap where IE falls short?

Check http://stackoverflow.com/questions/9067536/html5-forms-with-polyfills-is-it-worth-it. You can try that or look here http://afarkas.github.com/webshim/demos/index.html. Otherwise you can check https://github.com/elclanrs/jq-idealforms or http://jqueryvalidation.org/ — elclanrs, Jun 15 '13 at 10:31

wakqasahmed · Answer 1 · 2013-06-15T10:59:37.273

I ran into the same problem and i used following plugin, it is working pretty well.

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:

It can be used easily as followed with AJAX: (if you want without AJAX simply edit that part)

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

Bootstrap input validation in IE

1 Answers1