jqueryにカスタムバリデータを追加すると、エラーメッセージが表示されません。

Question

私が直面している問題と同様の解決策が見つかりませんでした。私はフォームを検証するためにjquery validateプラグインを使用しています。ドロップダウンを検証するためのカスタムバリデータメソッドと、テキストボックスを検証するためのカスタムバリデータメソッドをいくつか追加しました。ドロップダウンの検証はうまくいきますが、テキストボックスの検証は「部分的に」のみ有効です。実際の検証部分は機能するが、表示されるはずのエラーメッセージが表示されないので、私は 'partial'と言う。問題のフィールドはid3テキストフィールドで、関連するjavascriptです。

これは私のhtmlです：ここでは

---

<form class="form-horizontal" name="paymentInformation" id="paymentInformation" action="verifyOrder.cfm" method="post" role="form"> 

<div class="form-group"> 
<fieldset class="col-sm-12"> 

    <!-- Row 1 --> 
    <div class="row"> 
    <div class="col-sm-6"> 
     <label for="booktype" class="col-6 col-form-label"> 
     Book Type * 
     </label> 
     <select class="custom-select col-4" id="booktype" name="booktype"> 
     <option selected value="">Select book type</option> 
     <option value="val1">E-BOOK</option> 
     </select> 
    </div> 

    <div class="col-sm-6"> 
     <label for="id2" class="col-6 col-form-label"> 
     Number 
     </label> 
     <input type="form-control" placeholder="Number" type="text" id="id2" name="id2" class="col-10"> 
    </div> 

    </div> 
    <!-- /Row 1 --> 
    <!-- Row 2 --> 
    <div class="row"> 
    <div class="col-sm-6"> 
     <label for="firstname" class="col-6 col-form-label"> 
     First Name * 
     </label> 
     <input type="form-control" type="text" id="firstname" name="firstname" class="col-12" placeholder="Name"> 
    </div> 
    <div class="col-sm-6"> 
     <label for="id2" class="col-6 col-form-label"> 
     Book Name 
     </label> 
     <input type="form-control" placeholder="Book Name" type="text" id="id3" name="id3" class="col-10"> 
    </div> 
    </div> 
    <!-- /Row 2 --> 
    <div class="row"> 
    <div class="col-sm-6"> 
     <label for="lastname" class="col-6 col-form-label"> 
     Last Name * 
     </label> 
     <input type="form-control" type="text" id="lastname" name="lastname" class="col-12" placeholder="Name"> 
    </div> 
    </div> 
    <!-- /Row 2 --> 
    <label for="description" class="col-10 col-form-label"> 
    Country description 
    </label> 
    <textarea id="description" name="description" rows="4" class="form-control txtarea-rounded"></textarea> 
    <div class="form-check"> 
    <label class="col-sm-6">Countries: </label> 
    <br /> 
    <label class="form-check-label col-10"> 
     <input class="form-check-input col-10" type="checkbox" name="usa" value="Y">USA 
     <br /> 
     <input class="form-check-input col-10" type="checkbox" name="uk" value="Y"> UK 
    </label> 
    </div> 

</fieldset> 
</div> 
<div class="hideDiv"> 
<input type="submit" name=btnSubmit value="PROCEED TO THE NEXT STEP &#xf054;" class="blueButton"> 
</div> 
</form> 

---

は私のjavascriptです：（問題のカスタムルールは、CAPSにコメントしている）

---

var authorlist = [{"AUTHOR":"DONNA 
EDWARDS","COUNTRY":"USA","REGION":"MIDWEST"},{"AUTHOR":"EMERALD 
JONES","COUNTRY":"UK","REGION":"EU"}, 
{"AUTHOR":"SHAKESPEARE","COUNTRY":"UK","REGION":"EU"}]; 

function checkName(){ 
    var nameIsValid = true; 
    var nametocheck = $("#id3").val(); 
    $.each(authorlist, function(index, val){ 
    //console.log(val.AUTHOR); 
    if(val.AUTHOR.toUpperCase() == nametocheck.toUpperCase()){ 
    //console.log(val.AUTHOR); 
    nameIsValid = false; 
    return false; 
} 
}); 
return nameIsValid; 
} 

$("#id3").on("blur", function(){ 
    if(!checkName()){ 
    //display error: This Book name already exists! 
} 
    else{ 
    //remove error message 
} 
    console.log("The name entered is valid: " + checkName()); 
}); 


function checkForm() { 
    var formIsValid = checkName() && $("#paymentInformation").valid(); 
    if (formIsValid) { 
    $(".hideDiv").show(); 
    } else { 
    $(".hideDiv").hide(); 
    } 
    } 

$("#booktype").on("change", function() { 
    checkForm(); 
    }); 

$("#paymentInformation").on("keyup", function() { 
    checkForm(); 
    }); 

// first custom rule 
$.validator.addMethod("valueNotEquals", function(value, element, arg) { 
    return arg !== value; 
    }, "Value must not equal arg."); 

    //2ND CUSTOM RULE - THIS RULE PARTIALLY WORKS, BUT ERROR DOES NOT DISPLAY 
$.validator.addMethod("booknameExists", function(value,element,arg){ 

    }, "Book name must not pre-exist"); 

$.validator.setDefaults({ 
    errorElement: "span", 
    errorClass: "help-block", 
    highlight: function(element) { 
    $(element).parent().removeClass('has-success').addClass('has-error'); 
    }, 
    unhighlight: function(element) { 
    $(element).parent().removeClass('has-error').addClass('has-success'); 
    }, 
    errorPlacement: function(error, element) { 
    if (element.parent('.input-group').length || element.prop('type') === 
     'checkbox' || element.prop('type') === 'radio') { 
     error.insertAfter(element.parent()); 
     } else { 
     error.insertAfter(element); 
     } 
    } 
}); 

$("#paymentInformation").validate({ 
    rules: { 
    'booktype': { 
    valueNotEquals: "" 
    }, 
    'firstname': { 
     required: true, 
     maxlength: 200 
    }, 
    'lastname': { 
     required: true, 
     maxlength: 200 
    }, 
    'id3': { 
    required: true, 
    maxlength: 100, 
    booknameExists: false 

    } 
    }, 
messages: { 
'booktype': { 
    valueNotEquals: "Select a book type.", 
}, 
'firstname': { 
    required: "Enter your First Name.", 
    maxlength: "Your First Name cannot exceed 200 characters" 
}, 
'lastname': { 
    required: "Enter your Last Name.", 
    maxlength: "Your Last Name cannot exceed 200 characters" 
}, 

//THE FIRST 2 STANDARD BUILT IN ERROR MESSAGES ARE DISPLAYED CORRECTLY, 
//BUT THE LAST CUSTOM ERROR MESSAGE - booknameExists - DOES NOT 
'id3': { 
    required: "Book name is required.", 
    maxlength: "Book name cannot exceed 200 characters", 
    booknameExists: "Book name already exists!" 
} 
} 
}); 

---

のCSSはフィドルであるが、完全を期すために、ここにある：ここでは

---

.hideDiv { 
    display: none; 
    } 

.has-error { 
    color: red; 
} 

はバイオリンへのリンクです：https://jsfiddle.net/0puehapu/

すべてのヘルプは歓迎です！

Answer 1

私はついにこれを理解しました。私のカスタムバリデーターには1行のコードがありませんでした。これはバグ修正後の私のカスタムバリデーターの外観です：

$.validator.addMethod("booknameExists", function(value){ 
    return checkName(); 
}, "Book name must not pre-exist"); 

欠けている部分は次のとおりです。return checkName（）; > 10yrsの間、プラグインの検証に失敗していませんでしたが、それは再学習プロセスでした。彼の努力のために@SparkyへのThx - 彼のコメントを上回るだろう。

は（PS：完全なコードを探している人のために、私はスパーキーに私の返事に掲載jsfiddleはそれをすべてしている - 唯一の変更は、上記の抜粋です）