jQuery output field required (from validation) into a specified div

Hello I'm stuck with jQuery validation, I basically need it so that when the form is validating when the submit button is click the "field required" message will output put into a specific div.

This is what I have tried but I know I am way off:

$(document).ready(function () {

    $("#bookingform").validate();
    $(".small").append(".error");

});

.small is the div tag i want the "required field" message to show in.

Answers


Looks like what your looking for is errorPlacement this allows you to place the error message where you want.

$(document).ready(function () {
    $("#bookingform").validate({
        errorPlacement: function(error, element) {
            error.appendTo( element.prev().find('.small') );
        }
    });
});

error contains the error message, element is the form field with the error

Basically the code above is saying find the element with the error, find the prev element before it which is the <label> element, then use find() to find the small class div inside it and append the error to it.


If all you are checking is if the field is filled out then:

Wrap each row(label and input combo) in a span with the class requiredField. Then uses the following JS

function()
{
  var error = false;
  $('.requiredField').each(function()
  {
    if($.trim($(this).find('input').val()) === '')
    {
      $(this).find('.class').text('required field');
      error = true;
    }
  });
}
if(!error)
{
  $('#bookingform').submit();
}

If you are doing specific field validation change the class on the row wrapper to something like requiredDate/requiredPhone and put another $('.requiredDate').each with the specific validation for those fields.


Need Your Help

Automatic buffer clear while using OpenGL on Android

android opengl-es egl

I'm writing a certain OpenGL application where I'd specifically like to draw frames incrementally. For this, I'd like to disable automatic clearing of buffer which I understand, is default behavior...

How can I prevent a floated div from inheriting his sibling's margin-top?

css css-float

I have some html code that look like this sample here :