Question

我需要一些表单验证方面的帮助。基本上，我使用Bootstrap 4和MDB for Bootstrap。

现在，问题是，每当我尝试验证字段时，标签文本（包含输入字段的名称）在输入字段处于活动状态时会上升，如果出现错误，则错误文本会重叠标签。我已附上一些屏幕截图，以便更好地了解问题。任何帮助将不胜感激。

这是我的表格

的html，css和js

＆＃13;

$(document).ready(function() {

  var emailInput = $('#email');
  var nameInput = $("#username");
  var pass = $('#password');

//Validate email address
  emailInput.keyup(function() {

    var email = $('#email');
    var expression = /^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
    var regex = new RegExp(expression);

    if(emailInput.val() == '' || !(emailInput.val()).match(regex)) {
      emailInput.addClass('validate');

      return false;
    }
    else {
      return true;
    }
  });

//Validate name
  nameInput.click(function() {

    var expression = "^[\\p{L} .'-]+$";
    var regex = new RegExp(expression);

    if(nameInput.val() == '' || !(nameInput.val()).match(regex)) {
      nameInput.addClass('validate');
      return false;
    }
    else {
      return true;
    }
  });

/*
//Validate password
/ pass.click(function() {
    var expression = "^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$";
    var regex = new RegExp(expression);

    if(pass.val() = '') {
      alert('error');
    }
    else {
      return true;
    }
  });*/


  $("#form").validate({
    rules: {
      email: {
        required: true,
        email:true
      },
        password: "required",
    },
    messages: {
      email: {
        required: 'Please enter an email address.',
        email: 'Invalid email address'
      }
    }
  });

});

＆＃13;

html, body {
  margin: 0;
  padding: 0;
  background-color: #292c2f;
}

.card {
  margin-top: 150px;
}

.card-block {
  -webkit-box-shadow: 0px 12px 24px 9px rgba(0,0,0,0.65);
  -moz-box-shadow: 0px 12px 24px 9px rgba(0,0,0,0.65);
  box-shadow: 0px 12px 24px 9px rgba(0,0,0,0.65);
  background-color: #292c2f
}

.form-header,h3 {
  background-color: #212121;
  color: #DDD;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

i {
  color: #FFF;
}

.loginLabel {
  font-size: 16px;
  color: #CCC;
}

.linkLogin,
.linkLogin:focus,
.linkLogin:visited {
  font-size: 16px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.6);
  transition: all .3s ease-in;
}

.linkLogin:hover {
  color: rgba(255, 255, 255, 1);
}

i.fa.fa-user.user1 {
  color: #FFF;
}

i.fa.fa-user,
i.fa.fa-envelope,
i.fa.fa-lock {
  color: rgba(255, 255, 255, 0.5);
  transition: all .3s ease-in;
}

i.fa.fa-user.active,
i.fa.fa-envelope.active,
i.fa.fa-lock.active {
  color: rgba(255, 255, 255, 1);
}

input[type=date]:focus:not([readonly]),
input[type=datetime-local]:focus:not([readonly]),
input[type=email]:focus:not([readonly]),
input[type=number]:focus:not([readonly]),
input[type=password]:focus:not([readonly]),
input[type=search-md]:focus:not([readonly]),
input[type=search]:focus:not([readonly]),
input[type=tel]:focus:not([readonly]),
input[type=text]:focus:not([readonly]),
input[type=time]:focus:not([readonly]),
input[type=url]:focus:not([readonly]),
textarea.md-textarea:focus:not([readonly]) {
    color: #FFF;
}

＆＃13;

<!-- REIGISTRATION FORM -->
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col-lg-5">
      <div class="card">

        <form method="post" id="form">
          <div class="card-block">

            <!--Header-->
            <div class="form-header">
              <h3><i class="fa fa-user user1"></i> Register</h3>
              </div>

              <!--Body-->
              <div class="md-form form-sm">
                <i class="fa fa-user prefix"></i>
                <input type="text" id="username" class="form-control">
                <label for="username">Name</label>

              </div>
              <div class="md-form form-sm">
                <i class="fa fa-envelope prefix"></i>
                <input type="email" name="email" id="email" class="form-control">
                <label for="email" id="em">Email</label>
              </div>

              <div class="md-form form-sm">
                <i class="fa fa-lock prefix"></i>
                <input type="password" name="password" id="password" class="form-control">
                <label for="password">Password</label>
              </div>

              <div class="md-form form-sm">
                <i class="fa fa-lock prefix"></i>
                <input type="password" id="confirmPassword" class="form-control">
                <label for="confirmPassword">Confirm Password</label>
              </div>

              <div class="text-center">
                <button type="submit" class="btn btn-elegant" id="signUp">Sign up</button>
                <fieldset class="form-group">
                  <label class="loginLabel">Already have an account? <br /><a href="signin.html" class="linkLogin">Sign in</a></label>
                </fieldset>
              </div>
            </div>
          </form>
      </div>
    </div>
  </div>
</div>

＆＃13;

引导标签和jquery验证文本重叠

0 个答案: