Question

我正在尝试制作一个简单的登录/注册表格，如果用户单击注册表格上的注册按钮，卡片将翻转以注册表格，反之亦然。

但是，如果表单中的输入电子邮件字段为空，则无法正常工作，但是如果电子邮件输入字段中有一些文本，则可以正常工作。

如果电子邮件字段为空，然后单击注册按钮，则卡翻转并消失。

请帮助我。

// var card = document.querySelector('.card');
// card.addEventListener( 'click', function() {
//   card.classList.toggle('is-flipped');
// });

$(".flipbutton").click(function(){
    console.log("abc");
    $(".card").toggleClass("is-flipped");
})

body { font-family: sans-serif; 
    height: 100%;
   display: flex; 

}

.scene {
  width: 300px;
  height: 400px;
  /*border: 1px solid #CCC;*/
  margin: 150px auto;
  perspective: 600px;
  align-items: center;
  /*display: flex;*/
  
}
.form-group{
    margin-left: 10px;
    margin-right: 10px;
}
form{
    text-align: center;
}
.signintext{
    height: 50px;
    text-align: center;
    color: #ccc;
    font-family: 'Oswald', sans-serif;
    font-size:30px;
    
    
}
hr{
    width: 80%;
    background-color: #ccc;
    
}

.card {

    
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
 
}

 .card.is-flipped { 
  transform: rotateY(180deg);
} 

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  
  backface-visibility: hidden;
}

.card__face--front {
  background: #260339;
}

.card__face--back {
  background: #9775AA;
  transform: rotateY(180deg);
}

<!DOCTYPE html>
 <html > 
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        
        <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>


        <div class="scene scene--card">
            <div class="card">
                <div class="card__face card__face--front">
                    <div class="signintext">Sign In</div>
                    <hr>


                    <form>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                                
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Password</label>
                                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                            </div>
                            
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <button type="submit" class="btn btn-primary flipbutton">Register</button>
                    </form>
                    


                </div>
                <div class="card__face card__face--back">
                    <div class="signintext">Register</div>
                    <hr>

                     <form>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                                
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Password</label>
                                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                            </div>
                            
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <button type="submit" class="btn btn-primary flipbutton">SignIn</button>
                    </form>


                </div>
            </div>
        </div>
<p>Click card to flip.</p>
        
        



        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <script src="script.js" ></script>
    </body>
</html>

Answer 1

根据新要求更改了答案。

当您单击“提交”按钮时，表单将被提交，这就是表单消失的原因。为了避免在不输入任何值的情况下提交表单，您可以在输入字段中添加“ 必需” 属性。我已经用必填属性更改了摘要。

在您的代码中，翻转卡片的按钮为“提交”类型，这导致表单提交。如下更改按钮：

<input type="button" value="sign in"/>

$(".flipbutton").click(function(){
    console.log("abc");
    $(".card").toggleClass("is-flipped");
})

body { font-family: sans-serif; 
    height: 100%;
   display: flex; 

}

.scene {
  width: 300px;
  height: 400px;
  /*border: 1px solid #CCC;*/
  margin: 150px auto;
  perspective: 600px;
  align-items: center;
  /*display: flex;*/
  
}
.form-group{
    margin-left: 10px;
    margin-right: 10px;
}
form{
    text-align: center;
}
.signintext{
    height: 50px;
    text-align: center;
    color: #ccc;
    font-family: 'Oswald', sans-serif;
    font-size:30px;
    
    
}
hr{
    width: 80%;
    background-color: #ccc;
    
}

.card {

    
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
 
}

 .card.is-flipped { 
  transform: rotateY(180deg);
} 

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  
  backface-visibility: hidden;
}

.card__face--front {
  background: #260339;
}

.card__face--back {
  background: #9775AA;
  transform: rotateY(180deg);
}

<!DOCTYPE html>
 <html > 
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        
        <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>


        <div class="scene scene--card">
            <div class="card">
                <div class="card__face card__face--front">
                    <div class="signintext">Sign In</div>
                    <hr>


                    <form>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required>
                                
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Password</label>
                                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" required>
                            </div>
                            
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <button type="button" class="btn btn-primary flipbutton">Register</button>
                    </form>
                    


                </div>
                <div class="card__face card__face--back">
                    <div class="signintext">Register</div>
                    <hr>

                     <form>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required>
                                
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Password</label>
                                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" required>
                            </div>
                            
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <button type="button" class="btn btn-primary flipbutton">SignIn</button>
                    </form>


                </div>
            </div>
        </div>
<p>Click card to flip.</p>
        
        



        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <script src="script.js" ></script>
    </body>
</html>

Answer 2

也许只需将required添加到输入中，就可以正常工作了。

<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required>

演示

// var card = document.querySelector('.card');
// card.addEventListener( 'click', function() {
//   card.classList.toggle('is-flipped');
// });

$(".flipbutton").click(function() {
  console.log("abc");
  $(".card").toggleClass("is-flipped");
})

body {
  font-family: sans-serif;
  height: 100%;
  display: flex;
}

.scene {
  width: 300px;
  height: 400px;
  /*border: 1px solid #CCC;*/
  margin: 150px auto;
  perspective: 600px;
  align-items: center;
  /*display: flex;*/
}

.form-group {
  margin-left: 10px;
  margin-right: 10px;
}

form {
  text-align: center;
}

.signintext {
  height: 50px;
  text-align: center;
  color: #ccc;
  font-family: 'Oswald', sans-serif;
  font-size: 30px;
}

hr {
  width: 80%;
  background-color: #ccc;
}

.card {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
}

.card.is-flipped {
  transform: rotateY(180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card__face--front {
  background: #260339;
}

.card__face--back {
  background: #9775AA;
  transform: rotateY(180deg);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
</head>

<body>


  <div class="scene scene--card">
    <div class="card">
      <div class="card__face card__face--front">
        <div class="signintext">Sign In</div>
        <hr>


        <form>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required>

          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>

          <button type="submit" class="btn btn-primary">Submit</button>
          <button type="submit" class="btn btn-primary flipbutton">Register</button>
        </form>



      </div>
      <div class="card__face card__face--back">
        <div class="signintext">Register</div>
        <hr>

        <form>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required>

          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>

          <button type="submit" class="btn btn-primary">Submit</button>
          <button type="submit" class="btn btn-primary flipbutton">SignIn</button>
        </form>


      </div>
    </div>
  </div>
  <p>Click card to flip.</p>





  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <script src="script.js"></script>
</body>

</html>

输入字段为空时，卡片翻转功能不起作用

2 个答案: