Question

我有一个引导程序表单，我想通过单击链接（不提交按钮）使用Javascript验证。这是我的示例代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <style>
      /* ==========================================================================
          Demo using Bootstrap 3.3.4 and jQuery 1.11.2
          You don't need any of the following styles for the form to work properly, 
          these are just helpers for the demo/test page.
        ========================================================================== */

      #wrapper { 
        width:595px;
        margin:0 auto;
      }
      legend {
        margin-top: 20px;
      }
      #attribution {
        font-size:12px;
        color:#999;
        padding:20px;
        margin:20px 0;
        border-top:1px solid #ccc;
      }
      #O_o { 
        text-align: center; 
        background: #33577b;
        color: #b4c9dd;
        border-bottom: 1px solid #294663;
      }
      #O_o a:link, #O_o a:visited {
        color: #b4c9dd;
        border-bottom: #b4c9dd;
        display: block;
        padding: 8px;
        text-decoration: none;
      }
      #O_o a:hover, #O_o a:active {
        color: #fff;
        border-bottom: #fff;
        text-decoration: none;
      }
      @media only screen and (max-width: 620px), only screen and (max-device-width: 620px) {
        #wrapper {
          width: 90%;
        }
        legend {
          font-size: 24px;
          font-weight: 500;
        }
      }
      </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <script type="text/javascript">    
    </script>
    <script type="text/javascript" src="<?php echo base_url('scripts/js/validator.min.js'); ?>"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <!-- only added as a smoke test for js conflicts -->
</head>

<body>    
    <div id="wrapper">

      <form data-toggle="validator" role="form" id="form" name="extra" value="me">

        <div id="entry1" class="clonedInput">
          <h2 id="reference" name="reference" class="heading-reference">Entry #1</h2>
          <fieldset>

        <!-- Select Basic -->
        <label class="label_ttl control-label" for="title">Title:</label>


        <!-- Text input-->
        <div class="form-group">
          <label class="label_fn control-label" for="first_name">First name:</label>
          <input id="first_name" name="first_name" type="text" placeholder="" class="form-control" required>
          <p class="help-block">This field is required.</p>
        </div>


        </div><!-- end #entry1 -->


        <!-- Button -->
        <p>
          <a href="" onclick="myFunction()">Submit</a>
        </p>

        </fieldset>
        </form>
    </div> <!-- end wrapper -->

    <script>
    function myFunction(){
      $('#form').validator().on('submit', function (e) {
      if (e.isDefaultPrevented()) {
        // handle the invalid form...
      } else {
        // everything looks good!
      }
    })
    }
    </script>
</body>
</html>

使用此lib进行验证 http://1000hz.github.io/bootstrap-validator/#validator-usage

我需要'onclick'启动JS功能并运行验证，这应该给我一个真（即通过）或错误（即失败）。

注意：我是JS中的一个完整的菜鸟，我实际上是在努力解决这个问题，以便它对我有用。

Answer 1

您可以点击链接调用函数，例如：

function myFunction(){
    $("#form").submit(function() {
        $(this).validator(function(e) {
            if (e.isDefaultPrevented()) {
                // handle the invalid form...
            } else {
                // everything looks good!
            }
        });
    });
}

来源：https://api.jquery.com/submit/

Answer 2

我建议使用查询验证（http://jqueryvalidation.org）。它有很多选项，适用于bootstrap。您还可以在使用valid()方法提交之前检查字段，或使用validate()方法执行验证。

以下是一个快速示例https://jsfiddle.net/Lu165LLt/1/

<form id="myform" class="container">
    <div class="form-group">
        <label class="control-label" for="name">Name</label>
        <input type="text" name="name" class="form-control" required />
    </div>
    <a>Validate!</a>
</form>

$.validator.setDefaults({
    debug: true,
    success: "valid"
});
var form = $("#myform");
form.validate();
$("a").click(function () {
    alert("Valid: " + form.valid());
});

使用的库： jQuery，jQuery Validate，Bootstrap

使用Javascript进行Bootstrap表单验证

2 个答案: