Question

我这里有一个文本框，当输入无效时显示错误。我想知道如何制作一个能在两个范围内显示错误的功能，这样我就可以防止冗余。这是我的html文件

<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>

以下是我目前在课程中使用class 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'));
});

我认为我的代码将是多余的。它会在文本框中添加反馈图标。

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");
    }
  });

有人可以帮助我，因为我对jquery选择器

知之甚少，因此我在创建函数时遇到了麻烦

Answer 1

＆＃13;

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();
		}
	}

＆＃13;

<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>

＆＃13;

您可以在函数中进行更多验证，这是一个简单的示例。

Jquery创建一个将用于输入验证的函数

1 个答案: