Question

我正在使用html和jquery做一些形式的幻灯片

对于ex，如果用户点击某个字段并且没有输入任何内容，那么他点击不同的字段...我想将字段边框变为红色。这样用户就会知道他不能跳过这个领域......

当用户点击按钮提交时，也比我也想这样做，如果字段为空而不是将边框转为红色

下面是我到目前为止，还有更好的方法吗？英国广播公司似乎我重复了很多相同的代码

在上方它确实工作正常，所以我想我可以继续重复代码

注意我有20多个字段，所以jquery函数会很长

忘了告诉我正在使用asp字段：

 <asp:TextBox ID="FirstNameCTB"  ClientIDMode="Static" class="input form-control input-md" runat="server"></asp:TextBox>

javascript代码：

 <script type="text/javascript">
         $(function () {

             $('#FirstNameCTB').blur('input', function () {
                 if ($('#<%=FirstNameCTB.ClientID%>').val().trim() == '') 
                     $('#<%=FirstNameCTB.ClientID%>').css('border-color', 'red');
                 else
                     $('#<%=FirstNameCTB.ClientID%>').css('border-color', '');
             });
             $('#LastNameCTB').blur('input', function () {
                 if ($('#<%=LastNameCTB.ClientID%>').val().trim() == '')
                     $('#<%=LastNameCTB.ClientID%>').css('border-color', 'red');
                 else
                     $('#<%=LastNameCTB.ClientID%>').css('border-color', '');
             });

             $('.CHECKOUTLBC').click(function () {
                 if ($('#<%=FirstNameCTB.ClientID%>').val().trim() == '') {
                     $('#<%=FirstNameCTB.ClientID%>').css('border-color', 'red');
                     return false; // dont go to server side 
                 } else {
                     $('#<%=FirstNameCTB.ClientID%>').css('border-color', '');
                 }
                 if ($('#<%=LastNameCTB.ClientID%>').val().trim() == '') {
                     $('#<%=LastNameCTB.ClientID%>').css('border-color', 'red');
                     return false; // dont go to server side 
                 } else {
                     $('#<%=LastNameCTB.ClientID%>').css('border-color', '');
                 }
             });
         });
         </script>

Answer 1

假设所有表单输入都被称为输入，您可以遍历它们并使用与此类似的函数应用该函数。

var inputs = document.getElementsByTagName('input');
for(n = 0; n < inputs.length; n++){
  $(function () {
    inputs[n].blur('input', function () {
      if (inputs[n].val().trim() == '') 
        inputs[n].css('border-color', 'red');
      else
        inputs[n].css('border-color', '');
      });
  });
}

Answer 2

https://jqueryvalidation.org/可以成为您的解决方案。这里也是例子。 https://jqueryvalidation.org/files/demo/

此插件有红色边框，提交控件等。

此插件也会很好。

http://www.formvalidator.net/#reg-form

＆＃13;

  $.validate({
    modules : 'location, date, security, file',
    onModulesLoaded : function() {
      $('#country').suggestCountry();
    }
  });

  // Restrict presentation length
  $('#presentation').restrictLength( $('#pres-max-length') );

＆＃13;

<form action="" id="registration-form">
  <p>
    E-mail
    <input name="email" data-validation="email">
  </p>
  <p>
    User name
    <input name="user" data-validation="length alphanumeric" 
		 data-validation-length="3-12" 
		 data-validation-error-msg="User name has to be an alphanumeric value (3-12 chars)">
  </p>
  <p>
    Password
    <input name="pass_confirmation" data-validation="strength" 
		 data-validation-strength="2">
  </p>
  <p>
    Repeat password
    <input name="pass" data-validation="confirmation">
  </p>
  <p>
    Birth date
    <input name="birth" data-validation="birthdate" 
		 data-validation-help="yyyy-mm-dd">
  </p>
  <p>
    Country
    <input name="country" id="country" data-validation="country">
  </p>
  <p>
    Profile image
    <input name="image" type="file" data-validation="mime size required" 
		 data-validation-allowing="jpg, png" 
		 data-validation-max-size="300kb" 
		 data-validation-error-msg-required="No image selected">
  </p>
  <p>
    User Presentation (<span id="pres-max-length">100</span> characters left)
    <textarea name="presentation" id="presentation"></textarea>
  </p>
  <p>
    <input type="checkbox" data-validation="required" 
		 data-validation-error-msg="You have to agree to our terms">
    I agree to the <a href="..." target="_blank">terms of service</a>
  </p>
  <p>
    <input type="submit" value="Validate">
    <input type="reset" value="Reset form">
  </p>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>

＆＃13;

Answer 3

偶然的事情：

问题可能是javascript在控件之前运行
你不应该将核心javascript与jquery libary混合使用
使用模糊，开启，点击等jquery功能时不需要循环

将所有这些都牢记在心，下面是一个更好的解决方案。适合我

 $(function () {
     $(".input").blur(function () {
        if ($(this).val().trim() == '') 
            $(this).css('border-color', 'red');
        else
            $(this).css('border-color', '');
    });
 });

Answer 4

看看下面这个例子。

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p>
      <label for="cname">Name (required, at least 2 characters)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (optional)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">Your comment (required)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
<script>
$("#commentForm").validate();
</script>

Have a look at this example:

如何在jquery中做html表单vaildation

4 个答案: