1

I am trying to make a simple signin/register form where if the user clicks on the register button on signup form the card flips to register form and vice versa.

But it doesn't work as expected if the input email field is empty in the form but works fine if there is some text in the email input field.

If the email field is empty and we click on the register button, the card flips and disappears.

please help me with this.

// 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>
Kshitiz Sharma
  • 722
  • 6
  • 14
  • 34

2 Answers2

3

Changed my answer based on the new requirement.

When you click on the submit button the form gets submitted, that's why your form is disappearing. To avoid form submission without entering any values you can add "required" attribute to your input fields. I've changed my snippest with required attribute.

In your code, the buttons to flip the card is of type "submit" which causes a form submission. Change the buttons as follows:

<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>
Sukanya Purushothaman
  • 941
  • 10
  • 25
1

Maybe just add required to the input, then it seems to work just fine.

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

Demo

// 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>
Carsten Løvbo Andersen
  • 26,637
  • 10
  • 47
  • 77
  • Thank you for your suggestion. But still, there is a minor bug. When we click on the submit button without entering anything in the email field, the whole form disappears. – Kshitiz Sharma Aug 01 '18 at 13:04