Question

点击表单电子邮件字段中的忘记按钮应该使用jquery验证我的代码下面是否有任何错误建议我并通过登录页面图像

<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如下所示，如果有任何错误建议我

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

您的代码对我有用，您是否添加了JQuery Validate plugin库？

请参阅以下内容（您的代码+脚本包含）：

＆＃13;

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

＆＃13;

您必须将此包含在JQuery验证中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>

Answer 2

试试此代码

HTML

<form id="form1" method="post" action="#">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
<label for="email">Email</label>
<input type="email" name="email" id="email" />
<button type="submit">Submit</button>
</form>

的jQuery

$(document).ready(function () {
$("#form1").validate({
    rules: {
        "name": {
            required: true,
            minlength: 2
        },
        "email": {
            required: true,
            email: true
        }
    },
    messages: {
        "name": {
            required: "Please, enter a name"
        },
        "email": {
            required: "Please, enter an email",
            email: "Email is invalid"
        }
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});

});

工作演示 - http://jsfiddle.net/amwmedia/sw87W/

单击忘记按钮表单应使用jquery进行验证

2 个答案: