jquery validate rules apply even if input is not set as required

383
November 26, 2016, at 5:26 PM

I'm running in to an issue regarding how rules are applied with jQuery validate.

If a rule for FirstName is declared, jQuery validate will trigger an validation error for that field even if the input does not have the required attribute set.

I'm running validation as a nested function in a jQuery form builder plugin. The plugin generates a form based on json data received from marketo. The reason for nesting the validation is so that the validation for several forms across several domains can be managed in one script.

The reason I'm querying how can I prevent rules from triggering it the required attribute is not applied to a form field is because of how marketo outputs the forms and the form names.

Example form:

<form action="" id="form" method="post">
  <div class="formrow">
    <label for="FirstName">First name: </label>
    <input type="text" name="FirstName" id="FirstName">
  </div>
  <input type="submit" value="submit">
</form>

Example validation:

  $('#form').validate({
    rules: {
      FirstName: {
        required: true
      }
    },
    messages: {
      FirstName: "Please enter your name"
    },
    submitHandler: function (form) {
      $(form).ajaxSubmit({
        error: function (response) {
          console.log(response);
        },
        success: function (response) {
          console.log(response);
        }
      });
    },
    errorElement: "em",
    errorPlacement: function (error, element) {
      error.appendTo(element.closest(".formrow").children("label"));
    }
  });

I've put together a demo to show the issue.

http://jsfiddle.net/onebitrocket/dzv5ugo0/

Answer 1

The required attribute is not on the element, but you have defined required: true in the rules object for FirstName, hence why the field is required. Remove the rules object for that element and it should work as you require.

Updated fiddle

Rent Charter Buses Company
READ ALSO
Vertically aligned accordion menu

Vertically aligned accordion menu

Working with a jQuery accordion pluginThe plugin has three nesting levels

289
Handling click events of links rendered within markdown React component

Handling click events of links rendered within markdown React component

I'm using React and react-marked to render markdown within a component

401
Having trouble with my table sorting

Having trouble with my table sorting

I'm close to my desired output of being able to sort my table according to each header but it seems there are a few errors with my JSI can't seem to figure out why it's not quite sorting by each header and also I cannot seem to figure out how to have my scripts...

306
Remove some text from hidden input&#39;s value on select change

Remove some text from hidden input's value on select change

I am building a form where I take people's address detailsTo begin with State/County is not required, however, if they choose the country Australia, Canada or USA, it is

338