Question

我使用Jquery表单验证器来验证表单中的一些输入字段，我想要实现的是，如果一个人没有验证所有字段，则提交按钮不应该被单击用户。（应禁用）

这是我从中获得验证的地方。 http://www.formvalidator.net/index.html#advanced_toggleDisabled

以下是代码，但我仍然可以点击提交按钮。

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
<form action="#" method="POST">
  <p>
    User name (4 characters minimum, only alphanumeric characters):
    <input data-validation="length alphanumeric" data-validation-length="min4">
  </p>
  <p>
    Year (yyyy-mm-dd):
    <input data-validation="date" data-validation-format="yyyy-mm-dd">
  </p>
  <p>
    Website:
    <input data-validation="url">
  </p>
  <p>
    <button type="submit" value="Login">BIG BUTTOn</button>
  </p>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<script>
  $.validate({
    lang: 'en'
  });

  $.validate({
  modules : 'toggleDisabled',
  disabledFormFilter : 'form.toggle-disabled',
  showErrorDialogs : false
});
</script>

</body>

</html>

Answer 1

首先，您的表单没有“禁用切换”功能。您要定位的课程。

    <form action="#" method="POST" class="toggle-disabled">

Then you need to disabled the button initially. The plugin will later enable it.

     <button type="submit" value="Login" disabled="disabled">BIG BUTTOn</button>

Working code:

<!DOCTYPE html>
<html>
    <head>
        <title>Title of the document</title>
    </head>

    <body>
        <form action="#" method="POST" class="toggle-disabled">
            <p>
                User name (4 characters minimum, only alphanumeric characters):
                <input data-validation="length alphanumeric" data-validation-length="min4">
            </p>
            <p>
                Year (yyyy-mm-dd):
                <input data-validation="date" data-validation-format="yyyy-mm-dd">
            </p>
            <p>
                Website:
                <input data-validation="url">
            </p>
            <p>
                <button type="submit" value="Login" disabled>BIG BUTTOn</button>
            </p>
        </form>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
        <script>
            $.validate({
                lang: 'en'
            });

            $.validate({
                modules: 'toggleDisabled',
                disabledFormFilter: 'form.toggle-disabled',
                showErrorDialogs: true
            });
        </script>

    </body>

</html>

如果datavalidation错误无效，请禁用提交按钮

1 个答案: