JQuery Validation funktioniert nicht in Speichern Button Click-Handler

Question

Ich habe für ein paar Stunden versucht, die Validierung zu arbeiten, aber ohne Erfolg. Ich habe Namensattribut in das Eingabeelement eingefügt. Skriptquellen wurden ebenfalls hinzugefügt. Die Validierungsmethode wurde ebenfalls ausgelöst. Der Inhalt wird nicht validiert. Kann jemand sehen, was mit meinem Code falsch ist? Danke im Voraus. Fröhliche X'mas!

Meine HTML-Code

<input type="text" id="sessionSynopsisNameInput" name="sessionSynopsisNameInput" 
    class="form-control input-group-lg" maxlength="70" placeholder="Session Name" value=""/> 
<div class="errMsg"></div> 

Mein Javascript-Code

setupFormValidationRules(); 
function setupFormValidationRules() { 
    jQuery.validator.addMethod('lettersonly', function (value, element) { 
     return this.optional(element) || /^[a-zA-Z ]*$/.test(value); 
    }); 

    $('#dataForm').validate({ 
     rules: { 
      sessionSynopsisNameInput: { 
       required: true, 
       lettersonly: true 
      } 
     }, 
     messages: { 
      sessionSynopsisNameInput: { 
       required: 'Please enter Session Synopsis Name', 
       lettersonly: 'Only spaces and alphabets are allowed' 
      } 
     } 
    }); 
} 

Das Validate-Methode wird in der Schaltfläche Click-Handler speichern genannt.

$('#saveButton').on('click', function() { 
    $('#dataForm').validate(); 
}); 

Dies sind die Skript-Quellen, die ich

<script src="~/lib/jquery/dist/jquery.js"></script> 
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script> 
<script src="~/lib/jquery-validation/dist/additional-methods.js"></script> 

Answer 1

lettersonly ist schon da in zusätzliche Methoden enthalten sind, Ich habe den Namen lettersonly1 zu ändern, und es funktioniert gut Sie können überprüfen, im Beispiel

setupFormValidationRules(); 
 

 
function setupFormValidationRules() {  
 
    $.validator.addMethod('lettersonly1', function (value, element) { 
 
     return this.optional(element) || /^[^-\s][a-zA-Z\s-]+$/.test(value); 
 
    }); 
 

 
    $('#dataForm').validate({ 
 
     rules: { 
 
      sessionSynopsisNameInput: { 
 
       required: true, 
 
       lettersonly1: true 
 
      } 
 
     }, 
 
     messages: { 
 
      sessionSynopsisNameInput: { 
 
       required: 'Please enter Session Synopsis Name', 
 
       lettersonly1: 'Only spaces and alphabets are allowed' 
 
      } 
 
     } 
 
    }); 
 
} 
 

 
$(function(){ 
 
    $('#dataForm').validate() 
 
}) 
 

 
$("#dataForm").on("submit", function(){ 
 
    if($(this).valid()){ 
 
     console.log('submit'); 
 
     $(this).submit(); 
 
    } 
 
    
 
    return false; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.js"></script> 
 
<form method='post' action='#' id = 'dataForm'> 
 
    <input type="text" id="sessionSynopsisNameInput" name="sessionSynopsisNameInput" 
 
     class="form-control input-group-lg" maxlength="70" placeholder="Session Name" value=""/> 
 
    <div class="errMsg"></div> 
 
    <button id='saveButton' name='saveButton' type='submit'>Save</button> 
 
</form>