Question

我在使用jquery验证模式形式时遇到问题。如果我单击按钮，则什么也没有发生。相反，如果我在输入表单中编写内容并单击按钮将使它生效。这就像代码没有看到javascript。我已多次锁定问题的解决方案，但找不到。我有一个单独的文件javascript，并将其放在模态页面的顶部。我也把谷歌的jQuery库的链接。

我注意到，当我第一次打开页面并按下按钮进行验证时，无需检查我在脚本中编写的参数即可进行验证，而其他时候单击按钮则没有任何反应。

以下是库的链接：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

这是我的模态包含形式：

<!-- Modale -->
    <div class="modal fade" id="modaleReg" tabindex="-1" role="dialog" aria-labelledby="modale" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm" id="modifyMod" role="document">
            <!-- Contenitore modale -->
            <div class="modal-content">
                <!-- Header modale -->
                <div class="modal-header">
                    <h5 class="modal-title" id="titMod">modale</h5>
                    <span class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">&times;</span>
                </div>
                <!-- Body modale -->
                <div class="modal-body">
                        <!--Form per iscrizione -->
                        <form action="#" id="form">
                            <div class="form-group">
                                <label for="name">Nome</label>
                                <input id="name" name="name" type="text" class="form-control" placeholder="Nome">
                            </div>
                            <div class="form-group">
                                <label for="surname">Cognome</label>
                                <input id="surname" name="surname" type="text" class="form-control" placeholder="Cognome">
                            </div>
                            <div class="form-group">
                                <label for="email">Email address</label>
                                <input id="email" name="email" type="email" class="form-control" aria-describedby="emailHelp" placeholder="Email">
                                <small id="emailHelp" class="form-text text-muted">Non condivideremo mai la tua email con nessuno.</small>
                            </div>
                            <div class="form-group">
                                <label for="password">Crea password</label>
                                <input id="password" name="password" type="password" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="confermaPsw">Conferma password</label>
                                <input id="confermaPsw" name="confermaPsw" type="password" class="form-control">
                            </div>
                            <button type="submit" class="btn btn-primary btnmod">Continua</button>
                        </form>
                </div>
                <!-- Footer modale -->  
              <div class="modal-footer">
              </div>
              <!--Fine contenitore modale -->
            </div>
        </div>
    </div><!-- Fine modale -->

这是我的JavaScript代码：

$(document).ready(function() {
// Selezione form e definizione dei metodi di validazione
$("#form").validate({
    // Definiamo le nostre regole di validazione
    rules : {
        // name - nome del campo di input da validare
        name : {
          // Definiamo il campo name come obbligatorio
          required : true
        },
        password : {
            required : true,
            // Settiamo la lunghezza minima e massima per il campo password
            minlength : 5,
            maxlength : 8
        },
         email : {
            required : true,
            // Definiamo il campo email come un campo di tipo email
            email : true
        }
    },
    // Personalizzimao i mesasggi di errore
    messages: {
        name: "Inserisci il nome",
        password: {
            required: "Inserisci una password password",
            minlength: "La password deve essere lunga minimo 5 caratteri",
            maxlength: "La password deve essere lunga al massimo 8 caratteri"
        },
        email: "Inserisci la tua email"
    },
});

}）;

Answer 1

能否请您添加下面带有验证功能的代码，然后重试

$(document).ready(function() {
// Selezione form e definizione dei metodi di validazione
$("#form").validate({
    // Definiamo le nostre regole di validazione
    rules : {
        // name - nome del campo di input da validare
        name : {
          // Definiamo il campo name come obbligatorio
          required : true
        },
        password : {
            required : true,
            // Settiamo la lunghezza minima e massima per il campo password
            minlength : 5,
            maxlength : 8
        },
         email : {
            required : true,
            // Definiamo il campo email come un campo di tipo email
            email : true
        }
    },
    // Personalizzimao i mesasggi di errore
    messages: {
        name: "Inserisci il nome",
        password: {
            required: "Inserisci una password password",
            minlength: "La password deve essere lunga minimo 5 caratteri",
            maxlength: "La password deve essere lunga al massimo 8 caratteri"
        },
        email: "Inserisci la tua email"
    },
    submitHandler: function(form) {
      // code to submit the form
    }
});
});

您也可以尝试在模式框中添加代码，它将正常工作

用jQuery验证模态形式

1 个答案: