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 に答える