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

标签 javascript jquery html codeigniter

点击表单电子邮件字段中的“忘记”按钮应该使用我的代码下面的jquery进行验证,如果有任何错误建议我并浏览登录页面图像

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

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

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

                            });
                                   </script> 

最佳答案

您的代码对我有用,您是否添加了 JQuery Validate 插件 库?

请参阅以下内容(您的代码+脚本包括):

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

您必须在 JQuery 验证中包含此内容:

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

关于javascript - 单击忘记按钮表单应该使用 jquery 进行验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42969586/

相关文章:

javascript - 从 JavaScript 调用 Android 方法

javascript - 在 data() 函数和 v-model 中我应该做什么?

Javascript/Typescript - 防止表单在提交时重置

php - 如果已输入数据,如何填充多页表单;如果没有当前数据,如何将其留空?

javascript - typeahead 不允许自由文本输入?

javascript - Cckeditor插件: insert fake element add unwilling <p> tags before and after

javascript - 根据服务器响应 vai php 更改 ajax 成功时的变量值

jquery - 当需要动态添加类时使用 Waypoints 的更好方法是什么?

javascript - 打开模态窗口后无法清除间隔

HTML 表格隐藏列最佳实践