Question

我下面的代码包含HTML表单，并且我当前正在使用库jQueryValidation.js进行表单验证。问题是，当我将first name和last name留空时，标签始终显示在输入字段旁边。

我试图从输入CSS中删除inline-block，但是它似乎仍然无法正常工作。任何帮助将不胜感激。下图是我要实现的目标。

$().ready(function() {
  // validate the comment form when it is submitted
  $("#commentForm").validate();

  // validate signup form on keyup and submit
  $("#signupForm").validate({
    rules: {
      fname: "required",
      lname: "required",
      password: {
        required: true,
        minlength: 8
      },
      cpassword: {
        required: true,
        minlength: 8,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "Your first name is required.",
      lastname: "Please enter your lastname",
      username: {
        required: "Please enter a username",
        minlength: "Your username must consist of at least 2 characters"
      },
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 8 characters long"
      },
      confirm_password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 8 characters long",
        equalTo: "Please enter the same password as above"
      },
      email: "Please enter a valid email address",
    }
  });
});

input[type="text"],
input[type="email"],
input[type="password"] {
  padding: 4px 20px;
  height: 35px;
  border: 1px solid black;
  margin: 10px;
  border-radius: 3px;
  flex-grow: 1;
}

.form-row {
  flex-direction: row;
  display: flex;
}

.form-panel {
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}

input {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
  <style>

  </style>
</head>

<body>
  <form class="form-panel" id="signupForm">
    <div class="form-row form-name">
      <input type="text" name="fname" placeholder="First Name">
      <input type="text" name="lname" placeholder="Last Name">
      <br>
    </div>
    <div class="form-row form-email">
      <input type="email" name="email" placeholder="Email Address">
      <br>
    </div>
    <div class="form-row form-password">
      <input type="password" name="password" placeholder="Password">
      <input type="password" name="cpassword" placeholder="Comfirm Password">
    </div>
    <input type="submit" class="btn btn-default submit-button" value="Sign up!">
  </form>
  <script>
  </script>
</body>

</html>

Answer 1

只需将输入内容包装在div中即可

$().ready(function() {
  // validate the comment form when it is submitted
  $("#commentForm").validate();

  // validate signup form on keyup and submit
  $("#signupForm").validate({
    rules: {
      fname: "required",
      lname: "required",
      password: {
        required: true,
        minlength: 8
      },
      cpassword: {
        required: true,
        minlength: 8,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "Your first name is required.",
      lastname: "Please enter your lastname",
      username: {
        required: "Please enter a username",
        minlength: "Your username must consist of at least 2 characters"
      },
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 8 characters long"
      },
      cpassword: {
        required: "Please provide a password",
        minlength: "Your password must be at least 8 characters long",
        equalTo: "Please enter the same password as above"
      },
      email: "Please enter a valid email address",
    }
  });
});

* {
    box-sizing:border-box;
}
input[type="text"],
input[type="email"],
input[type="password"] {
  padding: 4px 20px;
  height: 35px;
  border: 1px solid black;
  border-radius: 3px;
  width:100%;
}

.form-row {
  flex-direction: row;
  display: flex;
}

.form-row > div {
  margin: 10px;
  flex-grow:1;
}

.form-panel {
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}

input {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
  <style>

  </style>
</head>

<body>
  <form class="form-panel" id="signupForm">
    <div class="form-row form-name">
      <div><input type="text" name="fname" placeholder="First Name"></div>
      <div><input type="text" name="lname" placeholder="Last Name"></div>
    </div>
    <div class="form-row form-email">
      <div><input type="email" name="email" placeholder="Email Address"></div>
    </div>
    <div class="form-row form-password">
      <div><input type="password" name="password" placeholder="Password"></div>
      <div><input type="password" name="cpassword" placeholder="Comfirm Password"></div>
    </div>
    <input type="submit" class="btn btn-default submit-button" value="Sign up!">
  </form>
  <script>
  </script>
</body>

</html>

Answer 2

请使用以下代码，我通过将元素包装在DIV中来更改了HTML，并更改了CSS

 <!DOCTYPE html>
  <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery- 
 validation@1.17.0/dist/jquery.validate.js"></script>
     <style>

     </style>
   </head>

 <body>
 <form class="form-panel" id="signupForm">
 <div class="form-fname">
  <input type="text" name="fname" placeholder="First Name">
  </div>

 <div class="form-lname">
  <input type="text" name="lname" placeholder="Last Name">
  <br>
</div>
<div class="form-email">
  <input type="email" name="email" placeholder="Email Address">
  <br>
</div>
<div class="form-password">
  <input type="password" name="password" placeholder="Password">
  </div>
<div class="form-password-confirm"> 
  <input type="password" name="cpassword" placeholder="Comfirm Password">
</div>
<input type="submit" class="btn btn-default submit-button" value="Sign up!">
</form>
<script>
</script>
</body>
</html>

CSS代码

    .form-panel {
      margin-left: auto;
      margin-right: auto;
      width: 60%;
      position : relative;
      display : block;
     }

     input[type="text"],
     input[type="password"] {
     padding: 4px 7px;
     height: 35px;
     border: 1px solid black;
     border-radius: 3px;
     position: relative;
     width: 89%;
     display: block;
     }

     input[type="email"]{
     padding: 4px 0px 4px 5px;
     height: 35px;
     border: 1px solid black;
     border-radius: 3px;
     width: 98%;
     display: block;
     position: relative;
     }

    /*First name row*/
   .form-fname{
    display : inline-block;
    position : relative;
    width : 45%;
    }

    /*Last name row*/
    .form-lname{
    display : inline-block;
    position : relative;
    width : 45%;
    float : right; 
    }

    /*Email row*/
   .form-email{
   display : block;
   position : relative;
   width : 100%; 
   }

   /*Password row*/
   .form-password{
   display : inline-block;
   position : relative;
   width : 45%; 
   }

   /*Password Confirm row*/
   .form-password-confirm{
   display : inline-block;
   position : relative;
   width : 45%;
   float : right;
   }

   label{
   display : block;
   position : relative;
   width : 100%;
   margin-top : 2px;
   margin-bottom : 5px
   }

   .submit-button{
   margin-top : 6px
   }

HTML表单验证标签放置

2 个答案: