Fix formatting with jQuery validation of HTML form

Question

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:

BenG · Accepted Answer · 2015-11-08 09:55:41Z

1

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.

answered Nov 8, 2015 at 9:55

BenG

15.2k5 gold badges48 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Fix formatting with jQuery validation of HTML form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related