1

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

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

如果电子邮件字段为空并且我们单击注册按钮，则卡片会翻转并消失。

请帮我解决一下这个。

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

4

2 回答 2

3

根据新要求更改了我的答案。

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

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

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

于 2018-08-01T12:17:01.327 回答
1

也许只是添加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>

于 2018-08-01T11:59:27.770 回答