Как вызвать mutiple id, используя `this` в jquery

Question

здесь я делаю контактные формы. На той же странице у меня есть 10 форм, и я хочу проверить все формы. Я хочу использовать один и тот же код проверки для всех форм. Здесь я дал идентификаторы, но проблема в том же идентификаторах не работает на той же странице. Я хочу использовать текущий идентификатор. Кто-нибудь может подсказать, как мне поступить? Не стесняйтесь сказать, есть ли ошибки в моем коде. Спасибо

$(document).ready(function(){
/* name*/	
	$('#contact_name').on('input', function() {
		var input=$(this);
		var is_name=input.val();
		if(is_name){
			input.removeClass("invalid").addClass("valid");
		}
		else{
			input.removeClass("valid").addClass("invalid");
		}
	});
		
	/* E-mail */	
	$('#contact_email').on('input', function() {
		var input=$(this);
		var regex = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
		var is_email=regex.test(input.val());
		if(is_email){
			input.removeClass("invalid").addClass("valid");
		}
		else{
			input.removeClass("valid").addClass("invalid");
		}
	});
  
  /* select People*/
	$('#contact_select').change(function() {
		var select=$(this);
		var selectOption =  $("#contact_select option:selected").val();
		if(selectOption){
			select.removeClass("invalid").addClass("valid");
		}
		else{
			select.removeClass("valid").addClass("invalid");
		}
	});

	/* select Time*/
	$('#contact_time').change(function() {
		var select=$(this);
		var selectTime =  $("#contact_time option:selected").val();
		if(selectTime){
			select.removeClass("invalid").addClass("valid");
		}
		else{
			select.removeClass("valid").addClass("invalid");
		}
	});

  
  	 /* Submit */
	$("#contact_submit button").click(function(event){

		var form_data = $("#contact").serializeArray();

		 var error_free = true;
		for (var input in form_data){
			var element = $("#contact_"+form_data[input]['name']);
			var valid = element.hasClass("valid");
			var error_element = $("span", element.parent());

			if (!valid){
				error_element.removeClass("error").addClass("error_show"); 
				error_free=false;
			}
			else{
				error_element.removeClass("error_show").addClass("error");
			}
		}

		
	  if (!error_free){
		return false;
		}
		else {		
			$('.success_msg').fadeIn().delay(3000).fadeOut();
			$('input , textarea , select').val('').removeClass('valid');
			event.preventDefault(); 
		}

	});
  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row current" id="demo1">
  <form id="contact" method="post" action="">
    <div class="detail">
      <input type="text" id="contact_name" name="name" required autocomplete="off" />
      <span class="inputBar"></span><!--inputBar-->
      <label for="contact_name">Name</label>
      <span class="error">This field is required</span>
    </div><!--detail-->
    <div class="detail">
      <input type="text" id="contact_email" name="email" required autocomplete="off" />
      <span class="inputBar"></span><!--inputBar-->
      <label for="contact_email">Email</label>
      <span class="error">A valid email address is required</span>
    </div><!--detail-->
    	<div class="btn-container" id="contact_submit">
					<a href="#"><button type="submit" class="btn"> Submit</button></a>
			</div>	
  </form>
</div>

<div class="row current" id="demo2">
  <form id="contact" method="post" action="">
    <div class="detail">
      <input type="text" id="contact_name" name="name" required autocomplete="off" />
      <span class="inputBar"></span><!--inputBar-->
      <label for="contact_name">Name</label>
      <span class="error">This field is required</span>
    </div><!--detail-->
    <div class="detail">
      <input type="text" id="contact_email" name="email" required autocomplete="off" />
      <span class="inputBar"></span><!--inputBar-->
      <label for="contact_email">Email</label>
      <span class="error">A valid email address is required</span>
    </div><!--detail-->
    	<div class="btn-container" id="contact_submit">
					<a href="#"><button type="submit" class="btn"> Submit</button></a>
			</div>	
  </form>
</div>

Answer 1

Кажется, вы используете HTML5, тогда добавление пользовательских методов для проверки не является хорошей идеей.

Попробуйте использовать проверку jquery и атрибут шаблона, например:

        function submitForm(id){
    var isValid = $("#" + id).valid();
     if(isvalid)
    /* Yes valid*/
   else
    /* Invalid*/
      });

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

<div class="row current" id="demo1">
  <form id="contact1" method="post" action="">
    <div class="detail">
      <input type="text" id="contact_name" name="name" required autocomplete="off" />
      <span class="inputBar"></span><!--inputBar-->
      <label for="contact_name">Name</label>
      <span class="error">This field is required</span>
    </div><!--detail-->
    <div class="detail">
      <input type="text" id="contact_email" name="email" required pattern="^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$" autocomplete="off" />
      <span class="inputBar"></span><!--inputBar-->
      <label for="contact_email">Email</label>
      <span class="error">A valid email address is required</span>
    </div><!--detail-->
        <div class="btn-container" id="contact_submit">
                    <a href="#"><button type="button" class="btn" onclick="submitForm('contact1')"> Submit</button></a>
            </div>  
  </form>
</div>

<div class="row current" id="demo2">
  <form id="contact2" method="post" action="">
    <div class="detail">
      <input type="text" id="contact_name" name="name" required autocomplete="off" />
      <span class="inputBar"></span><!--inputBar-->
      <label for="contact_name">Name</label>
      <span class="error">This field is required</span>
    </div><!--detail-->
    <div class="detail">
      <input type="text" id="contact_email" name="email" required autocomplete="off" pattern="^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$"/>
      <span class="inputBar"></span><!--inputBar-->
      <label for="contact_email">Email</label>
      <span class="error">A valid email address is required</span>
    </div><!--detail-->
        <div class="btn-container" id="contact_submit">
                    <a href="#"><button type="button" onclick="submitForm('contact2')" class="btn"> Submit</button></a>
            </div>  
  </form>
</div>

UPDATE:

Динамическая функция вызывается при нажатии кнопки. Тип это кнопка вместо отправки

Надеюсь, вы поймете, и это поможет.

Счастливое кодирование !!!!

Answer 2

Вы можете использовать пользовательский атрибут, такой как data-validation="validation-type", в элементах управления input, а затем сделать для каждого в вашей форме

$('<myform>').find('*[data-validation]').each(function(){
 // in here get the this object for each input control the code to validate comes here
 var valType = $(this).attr('data-validation');
  switch(valType)
  {
    case 1:
     //validation of case 1
     break;
     //add other cases as of your need.
  }     

});

Редактировать 1

Например, вы можете поиграть с этим фрагментом:

var button = $("button")

// handle click and add class
button.on("click", function() {
  //validating controls for form 1
  debugger;
  $('#myform1').find('*[data-validation]').each(function(e) {
    validateInput(this);
  });
  //validating controls for form 2
  $('#myform2').find('*[data-validation]').each(function(e) {
    validateInput(this);
  });
})

function validateInput(control) {
  if (control == null || control === undefined)
    return null;

  var validType = $(control).attr('data-validation');
  if (validType == null || validType === undefined)
    return null;

  switch (validType) {
    case "text":
      if ($(control).val().trim().length == 0)
        $(control).addClass('invalid').removeClass('valid');
      else
        $(control).addClass('valid').removeClass('invalid');
      break;
    case "number":
      debugger;
      var value = $(control).val().trim();
      if (isNaN(value) || value.length == 0)
        $(control).addClass('invalid').removeClass('valid');
      else
        $(control).addClass('valid').removeClass('invalid');
      break;
  }
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

.valid {
  border: 2px solid green;
}

.invalid {
  border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>
  Form 1
</h4>
<form id="myform1">
  <label>Enter name</label>
  <input type="text" data-validation="text" value="">
  <br/>
  <label>Enter Age</label>
  <input type="text" data-validation="number" value="">
  <br/>
</form>
<h4>
  Form 2
</h4>
<form id="myform2">
  <label>Enter name</label>
  <input type="text" data-validation="text" value="">
  <br/>
  <label>Enter Age</label>
  <input type="text" data-validation="number" value="">
  <br/>
</form>
<button>
Click me to validate
</button>