CODEWITHSUNDEEP
javascriptjqueryhtmlcssvalidation
jmancherje
jmancherje

Reputation: 6633

Fix formatting with jQuery validation of HTML form

I made a little sudoku board for some practice and I am having trouble with jQuery validation. The validation is working very well, however the default formatting is very ugly and deforms the board.

Is there a way to have an overlay validation message?

The fiddle is here (fiddle). Input an integer greater than 9 and move to another cell to see the jQuery validation.

basic format of the HTML form:

<form id="form1">
<table id="table">
  <tr id="row1">
    <td>
      <input type="number" /> </td>
    <td>
      <input type="number" /> </td>
    <td>
      <input type="number" /> </td>
  </tr>
</table>
</form>

jQuery:

  // adds <input type="number" min:1 max:9 required />
  $('input').attr({
    min: 1,
    max: 9,
  }).prop('required', true);

  $('#form1').validate();

I would like to know how I can use jQuery validation but prevent it from distorting the Sudoku board. Maybe an overlay like normal HTML form validation using a submit button.

Here is an image of the issue: Image of jQuery validation formatting issue

Upvotes: 1

Views: 99

Answers (1)

BenG
BenG

Reputation: 15164

You can place the error message anywhere using errorPlacement.

example:- 

<div class="error"></div>

.

$('#form1').validate({
 errorPlacement: function(error, element) {
    error.appendTo($('.error'));
  }   
});

FIDDLE

You can then use this to append the error in you chosen popup/tooltip/etc and show it from there.

Upvotes: 1

Related Questions