3
 <input type="text" class="form-control"
        name="username" placeholder="Enter ID" required
        oninvalid="this.setCustomValidity('Enter ID')"
        oninput="setCustomValidity('')" />

How to customize the Validation message position to the right of the textbox? Now it's coming below the textbox.

Plunker link: http://plnkr.co/edit/vvfR5pelzeJAMM5LagC9?p=preview

Julia Meshcheryakova
  • 3,162
  • 3
  • 22
  • 42
  • There is another idea used in asp.net mvc with javascript. [Similar problem](http://stackoverflow.com/questions/31187973/is-there-a-way-to-change-the-position-of-validation-message) – Emna Ayadi Feb 15 '16 at 08:29
  • http://jsfiddle.net/85xwh/1/ here its is there..but when i try it on plunker its not working! –  Feb 15 '16 at 09:29

3 Answers3

0

Using of positions to the element for parent element use relative and use position absolute for tooltip. If possible show your demo code.

Sayed Rafeeq
  • 1,219
  • 1
  • 15
  • 28
  • I have added plunker link..And sorry its for validation message and not for tooltip..I have edited –  Feb 15 '16 at 08:31
  • You can also try these boostrap form validation examples @ [demo link](http://formvalidation.io/examples/) – Sayed Rafeeq Feb 16 '16 at 06:27
0

Here is an example with jQuery dependent script. 

    <div>
        <label for="name">Name:</label>
        <input id="name" type="text" required>
    </div>

    <div>
        <label for="comments">Comments:</label>
        <textarea id="comments" required></textarea>
    </div>

    <div class="buttons">
        <button>Submit</button>
    </div>
</form>​

<script>
    var createAllErrors = function() {
        var form = $( this ),
            errorList = $( "ul.errorMessages", form );

        var showAllErrorMessages = function() {
            errorList.empty();

            // Find all invalid fields within the form.
            var invalidFields = form.find( ":invalid" ).each( function( index, node ) {

                // Find the field's corresponding label
                var label = $( "label[for=" + node.id + "] "),
                    // Opera incorrectly does not fill the validationMessage property.
                    message = node.validationMessage || 'Invalid value.';

                errorList
                    .show()
                    .append( "<li><span>" + label.html() + "</span> " + message + "</li>" );
            });
        };

        // Support Safari
        form.on( "submit", function( event ) {
            if ( this.checkValidity && !this.checkValidity() ) {
                $( this ).find( ":invalid" ).first().focus();
                event.preventDefault();
            }
        });

        $( "input[type=submit], button:not([type=button])", form )
            .on( "click", showAllErrorMessages);

        $( "input", form ).on( "keypress", function( event ) {
            var type = $( this ).attr( "type" );
            if ( /date|email|month|number|search|tel|text|time|url|week/.test ( type )
              && event.keyCode == 13 ) {
                showAllErrorMessages();
            }
        });
    };

    $( "form" ).each( createAllErrors );
</script>
Emna Ayadi
  • 2,430
  • 8
  • 37
  • 77
0

You can customize the validation message position by adding this CSS code.

.form-control[required] {
    margin-top: 40px !important;
    margin-left: 100px !important;
}
shivani890
  • 1
  • 2