Home/ Questions/Q 8463531
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T14:28:48+00:00

I’m unable to get my form validation below to respond unless I enter text

  • 0

I’m unable to get my form validation below to respond unless I enter text and tab to the next one. Clicking a different field or hitting submit does nothing, and I’d want it to respond in all scenarios. Honestly this is the first time I’ve used jquery for anything more complex than enabling or disabling classes, so I’m probably making a basic error somewhere. I can’t figure out what it is however.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

<script type="text/javascript">
    //form validation 
   $(document).ready(function() {
       $("#form").validate({
            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,
                    number: true,
                    },
            },
            messages: {
                organization: "Please enter a valid organization name",
                firstname: "Please enter your first name",
                lastname: "Please enter your last name",
                email: "Please enter a valid email address",
                phone: "Please enter a valid phone number",
            },
        });         
   });
</script>
</head>
<body>
<div id="form_container">
    <div id="form_title">REQUEST INFO</div>
    <form id="form" name="form_container" action="#">
        <!-- fields -->
        <input id="organization" type="text" name="organization" minlength="2" />
        <input id="firstname" type="text" name="firstname" minlength="2" />
        <input id="lastname" type="text"  name="lastname" minlength="2" />
        <input id="email" type="text" name="email" />
        <input id="phone" type="text" name="phone" />
        <!-- submit button -->
        <input type="button" id="button" name="submit" type="submit" value="submit" > 
    </form>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have 2 type attributes on your submit button

    <input type="button" id="button" name="submit" type="submit" value="submit" >

    Change it to this

    <input id="button" name="submit" type="submit" value="submit" />

    This will cause the button to submit the form, and trigger the validation plugin in the way you expect. Also, your validation configuration object has some extra trailing commas in a few places (after the the last field of each subobject) that may trip up some older browsers (IE in particular).

    • 0