Home/ Questions/Q 8938359
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T10:36:24+00:00

I have a simple page with a form and a button outside the form.

  • 0

I have a simple page with a form and a button outside the form. I am trying to validate the form on the button click.
I have added the rules for validation of the form on the document.onready function. However the form is not getting validated.

HTML:-

<html>
<head>
   <script src="lib/jquery1.5.2.js"></script>
   <script src="lib/jquery.validate.js"></script>
   <script src="lib/myjs.js"></script>
</head>
<body>

<form id="form1" name="form1"> 
     Field 1: <input id="field1" type="text" class="required">
</form>

<div>
    <input id="btn" type="button" value="Validate">
</div>

</body>
</html>

JS:-

$(document).ready(function(){

$("#form1").validate({
   rules: {
     field1: "required"
   },
   messages: {
     field1: "Please specify your name"

   }
})

$('#btn').click(function() {
 $("#form1").validate();  // This is not working and is not validating the form
});

});

Any idea what’s wrong?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Within your click handler, the mistake is the .validate() method; it only initializes the plugin, it does not validate the form.

    To eliminate the need to have a submit button within the form, use .valid() to trigger a validation check…

    $('#btn').on('click', function() {
    $("#form1").valid();
});

    jsFiddle Demo

    .validate() – to initialize the plugin (with options) once on DOM ready.

    .valid() – to check validation state (boolean value) or to trigger a validation test on the form at any time.

    Otherwise, if you had a type="submit" button within the form container, you would not need a special click handler and the .valid() method, as the plugin would capture that automatically.

    Demo without click handler

    EDIT:

    You also have two issues within your HTML…

    <input id="field1" type="text" class="required">

    • You don’t need class="required" when declaring rules within .validate(). It’s redundant and superfluous.

    • The name attribute is missing. Rules are declared within .validate() by their name. The plugin depends upon unique name attributes to keep track of the inputs.

    Should be…

    <input name="field1" id="field1" type="text" />
    • 0