1

I am making a login and register page. I am implementing form validation also. I want to do something like this- when the page loads first the LOGIN page gets active, when REGISTER is clicked then a register page gets active and display the form.

I have tried doing it over jsfiddle: jsfiddle link. I don't know why the transition effect does not work. It's just a simple transition on the panel-heading:

HTML-

<div class="panel-heading">
   <div class="row">
      <div class="col-xs-6">
          <a href="#" class="active" id="login-form-link">LOGIN</a>
      </div>
      <div class="col-xs-6">
          <a href="#" class="" id="register-form-link">REGISTER</a>
      </div>
</div>

JS-

$(document).ready(function() {
 $("#login-form-link").click(function(e) {
 $("#login-form").delay(100).fadeIn(100);
 $("#register-form").fadeOut(100);
 $("#register-form-link").removeClass("active");
 $(this).addClass("active");
 e.preventDefault();
});
$("#register-form-link").click(function(e) {
 $("#register-form").delay(100).fadeIn(100);
 $("#login-form").fadeOut(100);
 $("#login-form-link").removeClass("active");
 $(this).addClass("active");
 e.preventDefault();
 });
});

After it I am focusing on the validation of the REGISTER form. Believe me the register form opens in my browser I don't know why the register form does not open in jsfiddle!

Please look at the form its like this:

enter image description here

My problem is that the validation is not working and I don't know why. I have looked at many Stack Overflow links (this one was helpful) but none helps now.

Community
  • 1
  • 1
Parul Gupta
  • 59
  • 1
  • 8
  • There are many typos/syntax errors in that fiddle. To name a few: the `fields` key is missing a `}` on line 37 and there are missing `,`s on lines 86 and 101. – freginold Apr 13 '17 at 19:44
  • thanks for pointing that out. @freginold could you tell me why the transition in panel-heading is not working on jsfiddle? – Parul Gupta Apr 14 '17 at 02:27
  • It's because of errors in the JavaScript preventing it from running. If you delete everything below your first `$(document).ready` function (so that only the two click handlers are there) the transition to Register will work when you click on it. So something in the code below is preventing the JavaScript from executing. If you can fix any errors in that code block, it should work fine. – freginold Apr 14 '17 at 11:56
  • I've tried to tidy your post up a bit. Readers here genuinely appreciate posts where solid effort has been obviously made. To that end, if words like "please" are too much trouble to type, it may be that _Stack Overflow_ is not for you. – halfer Apr 14 '17 at 21:50
  • I'm an editor here, and I edit questions in many categories, since there are a lot of posters who do not care for well-written, readable questions. Wanting me to answer your question is akin to you selecting a user at random here (out of 6.6M users) and demanding that they answer your question. – halfer Apr 15 '17 at 12:32
  • I agree that having [other people edit your posts](https://stackoverflow.com/help/editing) is an unfamiliar experience, but it is very healthy - it is how we (try to) maintain quality on this site for the benefit of future readers. Best of luck getting the answer you need in this case! – halfer Apr 15 '17 at 12:33
  • 1
    Not intended to be rude, I can assure you. I will take your feedback about my tone on board. May I take it that you will take mine on board too? Thank you. – halfer Apr 15 '17 at 12:42

1 Answers1

2

you have multiple syntax errors in jQuery code also you are using wrong libraries,

fiddle provided in question used bootstrapValidator library also jqueryValidation lib, these 2 libraries has nothing to do with formValidation

if you checked your browser console log, half of the problems syntax errors e.g

  • missing multiple commas
  • wrong use of semi colon
  • wrong use of inverted commas

can easily be fixed also you can found $(...).formValidation is not a function in console log too means library is missing.

here is the working fiddle

syntax error fixed and correct and required formValidation libraries added

  • transition effect working
  • validation of the register form working

$(document).ready(function() {

  $("#login-form-link").click(function(e) {
    $("#login-form").delay(100).fadeIn(100);
    $("#register-form").fadeOut(100);
    $("#register-form-link").removeClass("active");
    $(this).addClass("active");
    e.preventDefault();
  });
  $("#register-form-link").click(function(e) {
    $("#register-form").delay(100).fadeIn(100);
    $("#login-form").fadeOut(100);
    $("#login-form-link").removeClass("active");
    $(this).addClass("active");
    e.preventDefault();
  });

  $('#register-form').formValidation({

      feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        fullname: {
          validators: {
            notEmpty: {
              message: "Please enter this field"
            },
            regexp: {
              regexp: /^[A-Za-z\s]{1,}[\.]{0,1}[A-Za-z\s]{0,}$/,
              message: "full name cannot contain this symbol "
            }
          }
        },
        username: {
          validators: {
            notEmpty: {
              message: "Please enter this field"
            },
            stringLength: {
              min: 5,
              max: 15,
              message: "username must be more than 5 and less than 15 characters long"
            },
            regexp: {
              regexp: /^[a-zA-Z0-9_\.]+$/,
              message: 'username can only consist of alphabets, numbers, dot and underscore'
            }
          }
        },
        email: {
          validators: {
            notEmpty: {
              message: "Please enter this field"
            },
            emailAddress: {
              message: "invalid email!"
            }
          }
        },
        address: {
          validators: {
            notEmpty: {
              message: "Please enter this field"
            },
            regexp: {
              regexp: /^[a-zA-Z0-9\s,\/-]+$/,
              message: "invalid symbol!"
            }
          }
        },
        pincode: {
          validators: {
            notEmpty: {
              message: "Please enter this field"
            },
            stringLength: {
              min: 6,
              max: 6,
              message: "invalid pincode!"
            },
            digits: {
              message: "pin code can contain digits only"
            }
          }
        },
        phnumber: {
          validators: {
            notEmpty: {
              message: "Please enter this field"
            },
            stringLength: {
              min: 10,
              max: 10,
              message: "invalid phone number!"
            },
            digits: {
              message: "phone number can contain digits only"
            }
          }
        },
        password: {
          validators: {
            notEmpty: {
              message: "Please enter this field"
            },
            different: {
              field: 'username',
              message: 'The password cannot be the same as username'
            },
            identical: {
              field: "confirm_password",
              message: 'password and its confirm are not the same'
            }
          }
        },
        confirm_password: {
          validators: {
            notEmpty: {
              message: "Please enter this field"
            },
            identical: {
              field: "password",
              message: 'password and its confirm are not the same'
            }
          }
        }
      }
    })
    .on('success.form.bv', function(e) {

      var $form = $(e.target);
      var bv = $form.data('bootstrapValidator');

      $.post($form.attr('action'), $form.serialize(), function(result) {
        console.log(result);
      }, 'json');
    });
});
body {
  padding-top: 90px;
}

.panel-login {
  border-style: solid;
  border-color: #7B68EE;
  -webkit-box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.2);
}

.panel-login>.panel-heading {
  color: #7B68EE;
  background-color: #fff;
  border-color: #fff;
  text-align: center;
}

.panel-login>.panel-heading a {
  text-decoration: none;
  color: #666;
  font-weight: bold;
  font-size: 15px;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  transition: all 0.1s linear;
}

.panel-login>.panel-heading a.active {
  color: #7B68EE;
  font-size: 18px;
}

.panel-login>.panel-heading hr {
  margin-top: 10px;
  margin-bottom: 0px;
  clear: both;
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
}

.panel-login input[type="text"],
.panel-login input[type="email"],
.panel-login input[type="password"] {
  height: 45px;
  border: 1px solid #ddd;
  font-size: 16px;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  transition: all 0.1s linear;
}

.panel-login input:hover,
.panel-login input:focus {
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-color: #ccc;
}

input[type="submit"].btn-login {
  background-color: #59B2E0;
  outline: none;
  color: #fff;
  font-size: 14px;
  height: auto;
  font-weight: normal;
  padding: 14px 0;
  text-transform: uppercase;
  border-color: #59B2E6;
}

input[type="submit"].btn-login:hover,
input[type="submit"].btn-login:focus {
  color: #fff;
  background-color: #53A3CD;
  border-color: #53A3CD;
}

.forgot-password {
  text-decoration: underline;
  color: #888;
}

.forgot-password:hover,
.forgot-password:focus {
  text-decoration: underline;
  color: #666;
}

input[type="submit"].btn-register {
  background-color: #59B2E0;
  outline: none;
  color: #fff;
  font-size: 14px;
  height: auto;
  font-weight: normal;
  padding: 14px 0;
  text-transform: uppercase;
  border-color: #59B2E6;
}

input[type="submit"].btn-register:hover,
input[type="submit"].btn-register:focus {
  color: #fff;
  background-color: #53A3CD;
  border-color: #53A3CD;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.formvalidation/0.6.1/js/formValidation.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
<div class="container" style="margin-bottom: 5%;">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div class="panel panel-login">
        <div class="panel-heading">
          <div class="row">
            <div class="col-xs-6">
              <a href="#" class="active" id="login-form-link">LOGIN</a>
            </div>
            <div class="col-xs-6">
              <a href="#" class="" id="register-form-link">REGISTER</a>
            </div>
          </div>
          <hr>
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-lg-12">
              <form id="login-form" action="/login" method="post" role="form" style="display: block;">
                <div class="form-group">
                  <input type="text" name="username" pattern="^[_A-z0-9]{1,}$" maxlength="15" id="username" tabindex="1" class="form-control" placeholder="username" value="" required>
                  <!--error message like: "username already exist" -->
                  <span><p><!--error message here--></p></span>
                </div>
                <div class="form-group">
                  <input type="password" name="password" data-minlength="6" id="inputPassword" tabindex="1" class="form-control" placeholder="password" value="" required>
                  <!--error message like: "username and password do not match" -->
                  <span><p><!--error message here--></p></span>
                </div>
                <div class="form-group text-center">
                  <input type="checkbox" tabindex="3" name="remember" id="remember">
                  <label for="remember">Remember me</label>
                </div>
                <div class="form-group">
                  <div class="row">
                    <div class="col-sm-6 col-sm-offset-3">
                      <input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log in">
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="row">
                    <div class="col-lg-12">
                      <div class="text-center">
                        <a href="#" tabindex="5" class="forgot-password">Forgot Password?</a>
                      </div>
                    </div>
                  </div>
                </div>
              </form>
              <form id="register-form" action="/register" method="post" role="form" style="display: none;">
                <!-- username -->
                <div class="form-group">
                  <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="username" value="" required>
                </div>
                <!-- email -->
                <div class="form-group">
                  <input type="email" name="email" id="Email" tabindex="1" class="form-control" placeholder="email" value="" data-error="Email address is invalid" required>
                </div>
                <!-- fullname -->
                <div class="form-group">
                  <input type="text" name="fullname" id="Name" tabindex="1" class="form-control" placeholder="full name" value="" required>
                </div>
                <!-- address -->
                <div class="form-group">
                  <input type="text" name="address" id="address" tabindex="1" class="form-control" placeholder="address" value="" required>
                </div>
                <!-- pincode -->
                <div class="form-group">
                  <input type="text" name="pincode" id="pincode" tabindex="1" class="form-control" placeholder="pincode" value="" data-error="Invalid Pin code!" required>
                </div>
                <!-- phone number -->
                <div class="form-group">
                  <input type="text" name="phnumber" id="phnumber" tabindex="1" class="form-control" placeholder="phone number" value="" data-error="Invalid Phone Number!" required>
                </div>
                <!-- password -->
                <div class="form-group">
                  <input type="password" name="password" id="inputPassword" tabindex="1" class="form-control" placeholder="password" value="" required>
                </div>
                <!-- confirm password -->
                <div class="form-group">
                  <input type="password" name="confirm_password" id="confirmPassword" tabindex="1" class="form-control" placeholder="confirm password" value="" required>
                </div>
                <!-- register button -->
                <div class="form-group">
                  <div class="row">
                    <div class="col-sm-6 col-sm-offset-3">
                      <input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register Now">
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Shehary
  • 9,926
  • 10
  • 42
  • 71