5

I'm using jQuery validation plugin, for my form validation. However I'm unable to set the validation for a div.

Here is what I have tried so far

HTML:

<form id="form">
  <div id="location" name="location"></div>
</form>

JS:

$('#form').validate({
            rules: {
            isLocationEmpty: true;
            }
});

CustomValidation Mehthod:

$.validator.addMethod('isLocationEmpty', function (value, element) {        
    var loc = $('#location').text();
    return (loc != "")
}, 'REQUIRED.');

I'm haven't done this previously, please provide your suggestions.

Improve this question
6
  • 2
    Why are you trying to use a div there instead of a real form input? Commented Sep 26, 2013 at 14:03
  • It is probably because the developer didn't think users would try to validate divs. Commented Sep 26, 2013 at 14:04
  • @andi It is an existing work of my friend. where the form is has both input elements and few div like this. Hence I am tried this. Commented Sep 26, 2013 at 14:06
  • I think you need to switch those div's to form inputs, rather than do some hacky validation. Commented Sep 26, 2013 at 14:07
  • @andi I thought there is a way using jQuery validate. Commented Sep 26, 2013 at 14:10

2 Answers 2

Reset to default
10

Quote OP:

"I'm using jQuery Validation plugin for my form validation.... However I'm unable to set the validation for a div. I haven't done this previously, please provide your suggestions."

You will never be able to use the jQuery Validate plugin to validate a div. The proper HTML markup for data input is to use an input element.

This plugin will only work on the following kinds of data input elements (each must have a unique name attribute), which also must be within a form element container:

<form>

   <!-- // Input - Also including the various HTML5 input types
   // type = text, password, radio, checkbox, file, etc. -->
   <input type="text" name="something" />

   <!-- Hidden Input - 'ignore: []' must be defined in the options -->
   <input type="hidden" name="hide" />

   <!-- Select Dropdown -->
   <select name="foobar"> ... </select>

   <!-- Text Area Box -->
   <textarea name="barfoo"></textarea>

</form>

Also see the "reference" page in the docs: http://jqueryvalidation.org/reference/

Apparently the OP cannot change the HTML. Here is a very ugly workaround.

Code that can be used to copy the text of the div into a type="hidden" element, where the hidden element can then be validated with the plugin. This code can be called at any time or placed inside an event handler to fire upon blur or change:

$("#hidden").val( $('#div').text() );

Here is the corresponding jQuery:

$('#form').validate({
    ignore: [], // <-- validate hidden elements
    // other options, rules, and callbacks,
});
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks for the brief. Is there any other workaround, similar to this plugin?
@user1671639, I don't see why you can't change these div elements into proper data input elements. Whatever the reason, the only workaround I can imagine would be to use jQuery to copy the data from the div into a type="hidden" element upon some event like change or blur. Then target this hidden element with jQuery Validate.
Since it is an existing project, I'm not able to do this. However this is what I have tried so far jsfiddle.net/jZVA2/34. It seems this is what you last meant? Please let me know if it is a correct way?
@user1671639, you got the code for copying backwards and you have to follow my code comments above to activate validation for hidden fields. See: jsfiddle.net/gqj3G ~ However, the part I don't understand is how the user is able to change the data content within the div.
-1

I'm not sure why are you trying to validate a div but I suggest making it a textarea. In case you need to make it 'impossible' for the user to edit, add the readonly attribute.

<form id="form">
  <textarea id="location" name="location" readonly></textarea>
</form>
Improve this answer

4 Comments

Why not? Maybe the content of his div changes dynamically with javascript and he wants to make sure it has something during the validation process. Let me remind you that a div is ´readonly´ as well so your thinking would apply for it as well. We don't know why it's needed to make sure it has something.
The whole point of client-side validation is for the user's experience. If the user can't interact with the data, then you don't need to validate it... in other words, why would you provide a warning message to the user about data he hasn't entered and cannot control. It makes no sense.
In my opinion it makes sense if the content of the input can change with the interaction of the user. You say the user can't interact with the data, maybe not directly but other actions the user does can change it somehow. What if for example he has a button which, when clicked, adds text to the div. Maybe that's the case of the OP, and the validation needs to check the div has text. In your answer you're saying he should copy the content of the div to a hidden input and validate it. Isn't then your point the same? Why validate if the user can't interact with it?
The difference is that in my answer the user is interacting with the page and can correct the data if there's a validation error. Your answer makes no such provision... you actually stated the opposite, "In case you need to make it 'impossible' for the user to edit...".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.