JQuery creates a function that will be used to validate input

Question

I have a text box that displays an error when the input is invalid. I am wondering how to create a function that displays an error in two ranges, so I will prevent redundancy. Here is my html file

<div class="form-group row has-feedback" id="username-group">
            <div class="col-sm-4"><label class="control-label">Username</label></div>
            <div class="col-sm-8">
              <div>
                <input type="text" name="username" id="username" value="<?php echo $username;?>" class="form-control user-required" required>
                <span id="username-feedback" class="glyphicon form-control-feedback hidden"></span>
              </div>
              <div><span class="small font-design error_span"><?php if(isset($usernameErr)){echo $usernameErr;} ?></span></div>
            </div>
          </div>

And here is what I have done so far in the class with error_span

function checkEmpty(id){
  if($(id).val()==""){
    $(id)[0].setCustomValidity('Please fill out this field');
    $(id).closest('.form-group').find('.error_span').text("Please fill out this field").removeClass("hidden").addClass("text text-danger");
  }
  else{
    $(id)[0].setCustomValidity('');
    $(id).closest('.form-group').find('.error_span').text("").addClass("hidden").addClass("text text-danger");
  }
}
$(".user-required").blur(function(){
  checkEmpty("#" + $(this).attr('id'));
});

And my code, which I think will be redundant, is here. It will add a feedback icon in the text box.

if($("#username").val()==existing){
          $("#username-feedback").addClass("glyphicon-remove");
          $("#username-feedback").removeClass("glyphicon-ok hidden");
          $("#username-group").removeClass("has-success");
          $("#username-group").addClass("has-error");
          $("#username")[0].setCustomValidity('username not available');
          $("#username").closest('.form-group').find('.error_span').text("username not available").removeClass("hidden").addClass("text text-danger");
        }
        else{
          $("#username-feedback").addClass("glyphicon-ok");
          $("#username-feedback").removeClass("glyphicon-remove hidden");
          $("#username-group").removeClass("has-error");
          $("#username-group").addClass("has-success");
          $("#username")[0].setCustomValidity('');
          $("#username").closest('.form-group').find('.error_span').text("").addClass("hidden");
        }
$("#username").blur(function(){
    if($("#username").val()==""){
      $("#username-feedback").addClass("glyphicon-remove");
      $("#username-feedback").removeClass("glyphicon-ok hidden");
      $("#username-group").removeClass("has-success");
      $("#username-group").addClass("has-error");
      $("#username")[0].setCustomValidity('Please fill out this field');
      $("#username").closest('.form-group').find('.error_span').text("Please fill out this field").removeClass("hidden").addClass("text text-danger");
    }
  });

can someone help me cause me to create a function because i have a little knowledge about jquery selector

Answer 1

function saveForm(){
		
		var lenName = $('#nameInput').val().length;
		
		
		if (lenName <= 0) {	
			$( ".alert" ).text("Error submiting the form, please fill all the fields!");
            $( ".alert" ).show();
        }
		else{
			$( ".alert" ).hide();
			$( "#form" ).submit();
		}
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="form" action="test.html" method="post" id="form">

		 <div class="alert" style="display: none;"></div>
		<input name="name" type="text" class="form-control" id="nameInput" placeholder="Name">
	
    <br>
	<button type="button" onclick="saveForm()">Submit</button>

</form>

Run codeHide result

, .