1

i used required tag to do validation in my text area, without entering any value if i click on submit button its displaying default tool tip at center of text area and it shows "please fill out this field". The question is how i can change the position of the tooltip(like to right,to left) and how can i change the title of the tooltip (some thing like "enter some text").

the code i tried is :

    <script>
        function storevalue(){
            var b =document.getElementById("area").value;
            alert(b);
        }

    </script>
<body>
    <form onsubmit="storevalue()">
        <textarea  id="area" name="suggestion" style="width: 400px; height: 105px;" type="text" required  ></textarea>
            <input type="submit"  />
    </form>`enter code here`
</body>
Bharath
  • 11
  • 1
  • Styling the HTML5 form validation messages is not trivial due to the different implementations in each browser. See http://www.useragentman.com/blog/2012/05/17/cross-browser-styling-of-html5-forms-even-in-older-browsers/ – Moob Nov 23 '14 at 08:31
  • Closed as duplicate. See also: http://stackoverflow.com/questions/5272433/html5-form-required-attribute-set-custom-validation-message – Roko C. Buljan Nov 23 '14 at 08:35

2 Answers2

0

if you want to display after form you need have some name and id to the form, else you can directly call the form in jquery.

 function storevalue(){
            var b = document.getElementById("area").value;
            if (!b) {
            $("form").append("<div>enter some text</div>").css({top: 200, left: 200});
        }
    }
asimshahiddIT
  • 330
  • 2
  • 5
  • 1
    Please, on JS question try *always* to primarily provide a JavaScript Answer. Also you plain copy-pasted Zac's answer by simply adding ˙form˙ instead of ˙#area˙ (as he did). `required` adds the tooltip by default (browser specific) and OP is simply asking how to control that tooltip position which your answer misses. Also notice that `.css({top: 200, left: 200})` will not affect the element in any way. – Roko C. Buljan Nov 23 '14 at 08:29
-1

what about just using jquery to create the tooltip?

function storevalue(){
            var b = document.getElementById("area").value;
            if (!b) {
                $("#area").append("<div>enter some text</div>")
            }
        }

then you can easily adjust the tooltip with css

Sam Murphey
  • 318
  • 1
  • 4
  • 16