#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Posts
    768
    Rep Power
    41

    HTML validation tags, wrong location


    Hi, I'm using simple HTML5 validation on a form.. Unfortunately, the error warnings, are appearing in the wrong spot (i.e. not next to the corresponding filed).

    You can my examplehere.

    I did some research, but no solution.

    Anyone have a good web site resource link, or some ideas?

    Thanks so much!

    -Sean
  2. #2
  3. No Profile Picture

    Join Date
    Aug 2016
    Location
    Islamabad
    Posts
    1
    Rep Power
    0
    Where you want them to show? same line with the input field ?
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2016
    Location
    Chennai
    Posts
    6
    Rep Power
    0
    Hi Lelales,

    Below is a sample coding which was accomplished using jQuery Dependent Script:

    Code:
    <form>
    
        <ul class="errorMessages"></ul>
    
        <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>
    I hope this will be helpful for you,

    Thanks,
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2017
    Location
    Ahmedabad
    Posts
    17
    Rep Power
    0
    Hi,

    Below is a sample coding in HTML WIth Validation

    Code:
    <html>
    <head>
    
    <title>Simple Validation Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
    $(document).ready(function()
    {
                    // Validation Function
    
                   function personalForm()
    		{
    			ResetValidationControls();
    			
    			var lname=$('#lname').val(); 
    			if(lname.length == 0 ) 
    			{
    				$('#lnamelbl').show();
    				$('#lname').focus();
    			}
    			
    			var fname=$('#fname').val();
    			if(fname.length == 0 ) 
    			{
    				$('#fnamelbl').show();
    				$('#fname').focus();
    			}
    		}
    		
    		
    		function ResetValidationControls()
    		{
    			$('#lnamelbl').hide();
    			$('#fnamelbl').hide();
    		}
    		
    		$("#btnsubmit").click(function()
    		{
    			ValidateForm();
    			return false;
    		});
    });
    </script>
    </head>
    <body>
    <div class="form-group" >
             <label>First Name</label>
             <input name="First Name"class="form-control" placeholder="Enter First Name" id="fname">
             <label id="fnamelbl" style="color:red; display:none">First Name Required !..</label>
     </div>
     <div class="form-group">
            <label>Last Name</label>
           <input class="form-control" placeholder="Enter Last Name" id="lname" name="Last Name">
           <label id="lnamelbl" style="color:red; display:none">Last Name Required !..</label>
    </div>
    <div>
             <button type="button" id="btnsubmit">Submit</button>
    </div>
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo