0

I am using jquery for checkbox validation(atleast one should be checked), here i need to display error message at the end of all checkboxes, but it always display after the label element and moves all checkboxes at the right side, which looks very weird. Below is my html code:

           <div>
            <label>Please Select a color:</label> 
                <input type="checkbox" id="color"  name="color" value="red"> red</input>
                <input type="checkbox" id="color"  name="color" value="green"> green</input>
                <input type="checkbox" id="color" name="color" value="yellow"> yellow</input>
                <input type="checkbox" id="color"  name="color" value="black"> black</input>
           </div>

Can anyone please tell me how to display error message at the right side after the end of all checkboxes without moving form structure.

Thanks in advance..

~Yash

Improve this question
5
  • 1
    show the js validation and css Commented Jun 30, 2015 at 9:45
  • Hi , here is js validation pastebin.com/4T9UB6sU for css i have not done any modification , thanks for response Commented Jun 30, 2015 at 9:50
  • wrap your checkboxes inside div and provide 'clear: both' property to that div. Commented Jun 30, 2015 at 10:07
  • Hi , thanks , actually I am getting error message after label wen using this js pastebin.com/xijgVZ0E without any errorplacement attribute which is what id ont want. If i use errorplacement (as here pastebin.com/4T9UB6sU )it doesnt show any message at all :( Commented Jun 30, 2015 at 10:16
  • any help on this would be appreciated , waiting for the response Commented Jun 30, 2015 at 10:23

1 Answer 1

Reset to default
10

try this:

error.appendTo("div");

instead of this: 

 error.appendTo( element.parent("div").next("div"));

Edit

<form id="myForm" method="post" name="myForm" action="">
        <div>
        <label>Please Select a color:</label> 
        <input type="checkbox" id="color"  name="color" value="red"> red</input>
        <input type="checkbox" id="color1"  name="color" value="green"> green</input>
        <input type="checkbox" id="color2" name="color" value="yellow"> yellow</input>
        <input type="checkbox" id="color3"  name="color" value="black"> black</input>
        <span id="errorToShow"></span> // Note this
        </div>
        <button type="submit">save</button>
    </form>

script:

$("#myForm").validate({
            rules: {
                color: "required"
            },
            messages: {
                color: "select atleast one color"
            },
            errorPlacement: function(error, element) {
                if (element.attr("name") == "color") {
                    error.appendTo("#errorToShow");
                } else {
                    error.insertAfter(element);
                }
            }
        });
Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

Hi, thats not working , I think is appending error after each div tag , my entire html is full of error messages when I use this "error.appendTo("div");" any other suggestions pls?? as i am very new with jquery , not able to find the solution.
Hi @chirag , thanks for the detailed solution but that also seems not working, may be something wrong with my code not sure what because I am exactly doing the same , let me try again
still error message is displaying before all checkboxes and moves checkboxes towards right :|
Are getting any kind of error? please provide your html & script that you are trying. so that i can help you further.
HTML and js are same as provided by u in previous answer , I would have send you the screenshot of my deployment but it not allowing me
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.