siddalingappa M siddalingappa M -4 years ago 92
HTML Question

click the forgot button form should be validate using jquery

click the forgot button in form email field should be validate using jquery below my code is there if any mistake suggest me and go through login pages images

login pages

<form id="form1" name="form1" action="<?php echo base_url(); ?>Index.php/Login_cntrl/login" method="POST" >

<div class="field-wrap">
<label class="view-label"for="email">Name (required, at least 2 characters)</label>
<input type="email" placeholder="Email Address" name="email" id="email" class="input-control" value="<?php echo set_value('email'); ?>" />
<span class="text-danger"><?php echo form_error('email'); ?></span>
</div>

<div class="field-wrap">
<label class="view-label"for="password">Password (required, at least 8 characters)</label>
<input type="password" placeholder="Password" name="password" id="password" value="<?php echo set_value('password'); ?>" />
<span class="text-danger"><?php echo form_error('password'); ?></span>


<button type="button" id="btn-show-forgot" name="btn-show-forgot">Forgot ?</button>


</div>


<div class="field-wrap">
<button type="submit" class="btn btn-submit" name="ulogin" id="ulogin" >Login</button>
</div>
<div class="field-wrap">
<a href="javascript:void(0)" class="btn btn-link btn-nobg" id="btn-show-signup">NEW User? Sign up</a>
</div>
</form>



$('#btn-show-forgot').click(function () {
// $('#forgot-email').attr('value', null);
$('.form-div').removeClass("active");
$('#forgot-form').addClass("active");
currentActiveId = "forgot-form";
sessionStorage.setItem('activeDiv', currentActiveId);
});


jquery as shown in below if in case any mistake suggest me

<script>
$(document).ready(function() {
$("#form1").validate({
rules: {
email: "required"
},
messages: {
email: "Please specify your name"

}
})
$('#btn-show-forgot').on('click', function() {
$("#form1").valid();
});

});
</script>

Answer Source

Your code is working for me, did you added JQuery Validate plugin library?

See follow (your code + script include):

<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<!-- Did you omit follow library? -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
  
</head>
<body>
<form id="form1" name="form1">
  <div class="field-wrap">
    <label class="view-label"for="email">Name (required, at least 2 characters)</label>
    <input type="email" placeholder="Email Address" name="email" id="email" class="input-control" value="" />
    <span class="text-danger"></span>
  </div>

  <div class="field-wrap">
    <label class="view-label"for="password">Password (required, at least 8 characters)</label>
    <input type="password" placeholder="Password" name="password" id="password"  value="" />
    <span class="text-danger"></span>


    <button type="button" id="btn-show-forgot" name="btn-show-forgot">Forgot ?</button>


  </div>


  <div class="field-wrap">
    <button type="submit" class="btn btn-submit" name="ulogin" id="ulogin" >Login</button>
  </div>
  <div class="field-wrap">
    <a href="javascript:void(0)" class="btn btn-link btn-nobg" id="btn-show-signup">NEW User? Sign up</a>
  </div>
  </form>


</body>
  <script>
    $(document).ready(function() {
      $("#form1").validate({
        rules: {
          email: "required"
        },
        messages: {
          email: "Please specify your name"

        }
      }) 
      $('#btn-show-forgot').on('click', function() {
        $("#form1").valid();
      });

    });
  </script> 
</html>

You have to include this for JQuery Validation:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download