CODEWITHSUNDEEP
jqueryvalidation
Jeremy Collins
Jeremy Collins

Reputation: 71

jQuery validation: form validation ignored in IE8

My form, pasted below in it's entirety, does not verify in IE8. No errors -- validation is just ignored so people could submit anything. I am using jquery 1.8.1 and the validation plugin version 1.9. Is it a syntax issue? No trouble in IE9, Chrome, or Firefox.

Pasting everything below, since I don't know where the trouble lies.

<!DOCTYPE HTML>
<html>
<head>
<!-- HTML5 biolerplace stuff below -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="">
<meta name="viewport" content="">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.1.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/vendor/jquery.defaultvalue.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>

<style>
#formwrapper {
    height:275px; 
    width:250px; 
    background-color: #f8f8f8; 
    border: 1px solid #cccccc; 
    padding: 25px 0 25px 25px;
    font-family: arial;
    font-size: 12px;
    }

.entry {
    border: 1px solid #cccccc; 
    margin: 5px 0; 
    width: 212px; 
    /* height: 26px; */
    color: black;
    padding: 7px 0 7px 10px;
    }

#form_title, #button {
    font-size: 18px;
    }

#form_title {
    color: #00589f;
    margin-bottom: 20px;
    }

#button {
    width: 80px;
    height: 24px;
    position: relative;
    left: 143px;
    top: 15px;
    background-color: #00589f;
    border: none;
    color: white !important;
    }

.error {
    border: 1px solid red; 
    background:#FFFFFF;
    content: "text"
    }

.empty {
    color: #ccc;
    }

</style>

<script type="text/javascript">
    //form validation start
   $(document).ready(function() {
        //$('form').submit(function(){
        //  $('.incomplete').val('');
        //}); 
        //reject default values
       $("#form").validate({
            wrapper: ".formwrapper",
            keyup: false,
            //onfocusout: false,
            //onclick: false,
            //onchange: false,
            errorLabelContainer: ".form",
            //errorClass: "incomplete",
            rules: {
                organization: {
                    required: true,
                    minlength: 2
                    },
                firstname: {
                    required: true,
                    minlength: 2
                    },
                lastname: {
                    required: true,
                    minlength: 2
                    },
                email: {
                    required: true,
                    email: true
                    },
                phone: {
                    required: true,
                    minlength: 10,
                    digits: true
                    }
            }
        });
    }); 

</script>

</head>
<body>

<div id="formwrapper">
    <div id="form_title">REQUEST INFO</div>
    <form id="form" name="form_container" action="#">
        <!-- fields -->
        <input class="entry" id="organization" type="text" name="organization" placeholder="Organization"/>
        <input class="entry" id="firstname" type="text" name="firstname" placeholder="First Name"/>
        <input class="entry" id="lastname" type="text"  name="lastname" placeholder="Last Name"/>
        <input class="entry" id="email" type="text" name="email" placeholder="Email"/>
        <input class="entry" id="phone" type="text" name="phone" placeholder="Phone"/>
        <!-- submit button -->
        <input id="button" class="button" type="submit" value="Submit" /> 
    </form>
</div>
<script>
    //talks to defaultvalue plugin to make placeholders work in IE
    $('#organization, #firstname, #lastname, #email, #phone').defaultValue();
</script>
</body>
</html>

Upvotes: 0

Views: 5588

Answers (3)

Ricardo Huertas
Ricardo Huertas

Reputation: 1306

I am using MVC 4 with Razor view and every single field was trigger as required in IE8, including checkbox, textbox, dropdowns that where NOT Required in my MVC Model.

I was able to solve it by downgrade the jquery and jquery.validate versions.

Don’t Work

<script src="~/javascript2/Menu/jquery-2.0.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

Works

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

Upvotes: 3

Jeremy Collins
Jeremy Collins

Reputation: 71

Going to answer my own question if any future-people have the same issue. The trouble was an incompatibility with the plugin to make the placeholder work in IE. I changed the placeholder-conversion plugin to https://github.com/mathiasbynens/jquery-placeholder, and the below code works:

<!DOCTYPE HTML>
<html>
<head>
<!-- HTML5 biolerplace stuff below -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="">
<meta name="viewport" content="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script >window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.min.js"><\/script>')</script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script >window.jQuery || document.write('<script src="js/vendor/jquery.validate.min.js"><\/script>')</script>
<script src="js/vendor/jquery.placeholder.min.js"></script>
<script src="js/vendor/modernizr-2.6.1.min.js"></script> 
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.1.min.js"></script> 

<style>
#formwrapper {
    height:275px; 
    width:250px; 
    background-color: #f8f8f8; 
    border: 1px solid #cccccc; 
    padding: 25px 0 25px 25px;
    font-family: arial;
    font-size: 12px;
    }

.entry {
    border: 1px solid #cccccc; 
    margin: 5px 0; 
    width: 212px; 
    /* height: 26px; */
    color: #000;
    padding: 7px 0 7px 10px;
    }

.entry[attr="placeholder"] {
    color: #ccc;
    }

#form_title, #button {
    font-size: 18px;
    }

#form_title {
    color: #00589f;
    margin-bottom: 20px;
    }

#button {
    width: 80px;
    height: 24px;
    position: relative;
    left: 143px;
    top: 15px;
    background-color: #00589f;
    border: none;
    color: white !important;
    }

.error {
    border: 1px solid red; 
    background:#FFFFFF;
    content: "text"
    }

input:-moz-placeholder {
    color: #ccc;
    }

</style>

<script type="text/javascript">
    //form validation start
$(document).ready(function() {
    //reject defaults for IE placeholder fix
    jQuery.validator.addMethod("defaultInvalid", function(value, element) {
    switch (element.value) {

        case "Organization": 
        if (element.name == "Organization") return false;
        break;

        case "First Name": 
        if (element.name == "First Name") return false;
        break;

        case "Last Name": 
        if (element.name == "Last Name") return false;
        break;

        case "Email": 
        if (element.name == "Email") return false;
        break;

        case "Phone": 
        if (element.name == "Phone") return false;
        break;

        default: return true;
        break;
    } 
    }); 
    //form validation start
   $("#form").validate({
        wrapper: ".formwrapper",
        keyup: false,
        //onfocusout: false,
        //onclick: false,
        onchange: false,
        errorLabelContainer: ".form",
        rules: {

            organization: {
                defaultInvalid: true,
                required: true,
                minlength: 2
                },

            firstname: {
                defaultInvalid: true,
                required: true,
                minlength: 2
                },

            lastname: {
                defaultInvalid: true,
                required: true,
                minlength: 2
                },

            email: {
                defaultInvalid: true,
                required: true,
                minlength: 2,
                email: true
                },

            phone: {
                defaultInvalid: true,
                required: true,
                minlength: 9,
                digits: true
                }
        }
    });
        //placeholders in IE
    $('input').placeholder();
});

</script>

</head>
<body>

<div id="formwrapper">
    <div id="form_title">REQUEST INFO</div>
    <form id="form" name="form_container" action="#">
        <!-- fields -->
        <input class="entry" id="organization" type="text" name="organization" placeholder="Organization"/>
        <input class="entry" id="firstname" type="text" name="firstname" placeholder="First Name"/>
        <input class="entry" id="lastname" type="text"  name="lastname" placeholder="Last Name"/>
        <input class="entry" id="email" type="text" name="email" placeholder="Email"/>
        <input class="entry" id="phone" type="text" name="phone" placeholder="Phone"/>
        <!-- submit button -->
        <input id="button" class="button" type="submit" value="Submit" /> 
    </form>
</div>
<script>
    //clear invalids w/ error class on submit
    $('form').submit(function(){
        $('.error').val('');
    }); 
</script>
</body>
</html>

Upvotes: 0

jgiunta
jgiunta

Reputation: 721

You need to update the jquery.validate library.

See this post

Enjoy !

Upvotes: 0

Related Questions