Jquery valldatorが動作しない

Question

私は最近、オーストラリアのビジネス番号のjqueryバリデータ関数を示すthisページを見つけました。私のCshtmlページには、次のフォーム要素があります。

<div class="col-md-4"> 
    <div class="form-group"> 
     <label asp-for="ABN" class="col-md-4 col-lg-4 control-label"></label> 
     <div class="col-md-8 col-lg-8"> 
      <input asp-for="ABN" class="form-control" /> 
      <span asp-validation-for="ABN" class="text-danger" /> 
     </div> 
    </div> 
</div> 

私はページにjqueryのコードを配置し、私はそれはそれを介してステップを行いますが、私はエラーに関する起こって何も得るfalseを返し、その数..ページがちょうど行くしながら、ご注意F12デバッガを使用していますオフにしてDBを更新します。

function abnValidate (value, element) { 
    if (value.length != 11 || isNaN(parseInt(value))) 
    return false; 
    var weighting = [10,1,3,5,7,9,11,13,15,17,19]; 
    var tally = (parseInt(value[0]) - 1) * weighting[0]; 
    for (var i = 1; i < value.length; i++) { 
     tally += (parseInt(value[i]) * weighting[i]); 
    } 
    return (tally % 89) == 0; 
} 
jQuery.validator.addMethod('abnValidate', abnValidate, 'This ABN is not valid'); 

私はJSFiddleでそれを試してみましたが、私が得るすべてのエラーです：

{"error": "Please use POST request"} 

私は、これはコードを正しく設定する方法を知らない場合であると思います。誰かが見て、私が逃しているものを見ることができますか？

編集

ここには要望どおりのフルフォームがあります。

  @model JobsLedger.ViewModels.CompanyDetailsViewModel 

     <form asp-action="Edit"> 
      <br /> 
      <div class="form-horizontal container"> 


       <div class="row"> 
        <div class="col-lg-12 text-center"> 
         <h2><span class="glyphicon glyphicon-edit"></span> Edit Company Details </h2> 
         <hr> 
        </div> 
       </div> 

       <div asp-validation-summary="ValidationSummary.ModelOnly" class="text-danger"></div> 
       <input type="hidden" asp-for="CompanyDetailsId" /> 


       @*ROW ONE*@ 
       <div class="row"> 

        <div class="col-md-4"> 
         <div class="form-group"> 
          <label asp-for="CompanyName" class="col-md-4 col-lg-4 control-label"></label> 
          <div class="col-md-8 col-lg-8"> 
           <input asp-for="CompanyName" class="form-control" /> 
           <span asp-validation-for="CompanyName" class="text-danger" /> 
          </div> 
         </div> 
        </div> 

       </div> 
       @*ROW TWO*@ 
       <div class="row"> 

        <div class="col-md-4"> 
         <div class="form-group"> 
          <label asp-for="ContactFirstName" class="col-md-4 col-lg-4 control-label"></label> 
          <div class="col-md-8 col-lg-8"> 
           <input asp-for="ContactFirstName" class="form-control" /> 
           <span asp-validation-for="ContactFirstName" class="text-danger" /> 
          </div> 
         </div> 
        </div> 

        <div class="col-md-4"> 
         <div class="form-group"> 
          <label asp-for="ContactLastName" class="col-md-4 col-lg-4 control-label"></label> 
          <div class="col-md-8 col-lg-8"> 
           <input asp-for="ContactLastName" class="form-control" /> 
           <span asp-validation-for="ContactLastName" class="text-danger" /> 
          </div> 
         </div> 
        </div> 

       </div> 

       @*ROW THREE*@ 
       <div class="row"> 

        <div class="col-md-4"> 
         <div class="form-group"> 
          <label asp-for="ContactEmail" class="col-md-4 col-lg-4 control-label"></label> 
          <div class="col-md-8 col-lg-8"> 
           <input asp-for="ContactEmail" class="form-control" /> 
           <span asp-validation-for="ContactEmail" class="text-danger" /> 
          </div> 
         </div> 
        </div> 



       </div> 

       @*ROW FOUR*@ 
       <div class="row"> 

        <div class="col-md-4"> 
         <div class="form-group"> 
          <label asp-for="MobilePhone" class="col-md-4 col-lg-4 control-label"></label> 
          <div class="col-md-8 col-lg-8"> 
           <input asp-for="MobilePhone" class="form-control" /> 
           <span asp-validation-for="MobilePhone" class="text-danger" /> 
          </div> 
         </div> 
        </div> 

        <div class="col-md-4"> 
         <div class="form-group"> 
          <label asp-for="OfficePhone" class="col-md-4 col-lg-4 control-label"></label> 
          <div class="col-md-8 col-lg-8"> 
           <input asp-for="OfficePhone" class="form-control" /> 
           <span asp-validation-for="OfficePhone" class="text-danger" /> 
          </div> 
         </div> 
        </div> 

       </div> 


       @*ROW FIVE*@ 
       <div class="row"> 

        <div class="col-md-4"> 
         <div class="form-group"> 
          <label asp-for="CompanyEmail" class="col-md-4 col-lg-4 control-label"></label> 
          <div class="col-md-8 col-lg-8"> 
           <input asp-for="CompanyEmail" class="form-control" /> 
           <span asp-validation-for="CompanyEmail" class="text-danger" /> 
          </div> 
         </div> 
        </div> 

       </div> 

       @*ROW SIX*@ 
       <div class="row"> 

        <div class="col-md-4"> 
         <div class="form-group"> 
          <label asp-for="ABN" class="col-md-4 col-lg-4 control-label"></label> 
          <div class="col-md-8 col-lg-8"> 
           <input asp-for="ABN" class="form-control" /> 
           <span asp-validation-for="ABN" class="text-danger" /> 
          </div> 
         </div> 
        </div> 

       </div> 

       <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <h4 class="panel-title"><strong>Company Address Details</strong></h4> 
        </div> 
        <div class="panel-body"> 

         @*ROW SEVEN*@ 
         <div class="row"> 

          <div class="col-md-4"> 
           <div class="form-group"> 
            <label asp-for="Street1" class="col-md-4 col-lg-4 control-label"></label> 
            <div class="col-md-8 col-lg-8"> 
             <input asp-for="Street1" class="form-control" /> 
             <span asp-validation-for="Street1" class="text-danger" /> 
            </div> 
           </div> 
          </div> 

          <div class="col-md-4"> 
           <div class="form-group"> 
            <label asp-for="Street2" class="col-md-4 col-lg-4 control-label"></label> 
            <div class="col-md-8 col-lg-8"> 
             <input asp-for="Street2" class="form-control" /> 
             <span asp-validation-for="Street2" class="text-danger" /> 
            </div> 
           </div> 
          </div> 

         </div> 


         @*ROW EIGHT*@ 
         <div class="row"> 

          <div class="col-md-4"> 
           <div class="form-group"> 
            <label asp-for="State" class="col-md-4 col-lg-4 control-label"></label> 
            <div class="col-md-8 col-lg-8"> 
             <select asp-for="State" asp-items="@Model.StatesList" class="form-control"></select> 
             <span asp-validation-for="State" class="text-danger" /> 
            </div> 
           </div> 
          </div> 

          <div class="col-md-4"> 
           <div class="form-group"> 
            <label asp-for="Suburb" class="col-md-4 col-lg-4 control-label"></label> 
            <div class="col-md-8 col-lg-8"> 
             <input asp-for="Suburb" class="form-control"> 
             <span asp-validation-for="Suburb" class="text-danger" /> 
            </div> 
           </div> 
          </div> 

          <div class="col-md-4"> 
           <div class="form-group"> 
            <label asp-for="Postcode" class="col-md-4 col-lg-4 control-label"></label> 
            <div class="col-md-8 col-lg-8"> 
             <input asp-for="Postcode" class="form-control" readonly="readonly" /> 
             <span asp-validation-for="Postcode" class="text-danger" /> 
            </div> 
           </div> 
          </div> 

         </div> 
        </div> 
       </div> 

       <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <h4 class="panel-title"><strong>Company Bank Details</strong></h4> 
        </div> 
        <div class="panel-body"> 

         @*ROW NINE*@ 
         <div class="row"> 

          <div class="col-md-4"> 
           <div class="form-group"> 
            <label asp-for="BankName" class="col-md-4 col-lg-4 control-label"></label> 
            <div class="col-md-8 col-lg-8"> 
             <input asp-for="BankName" class="form-control" /> 
             <span asp-validation-for="BankName" class="text-danger" /> 
            </div> 
           </div> 
          </div> 

          <div class="col-md-4"> 
           <div class="form-group"> 
            <label asp-for="BankBSB" class="col-md-4 col-lg-4 control-label"></label> 
            <div class="col-md-8 col-lg-8"> 
             <input asp-for="BankBSB" class="form-control" /> 
             <span asp-validation-for="BankBSB" class="text-danger" /> 
            </div> 
           </div> 
          </div> 

          <div class="col-md-4"> 
           <div class="form-group"> 
            <label asp-for="BankAccount" class="col-md-4 col-lg-4 control-label"></label> 
            <div class="col-md-8 col-lg-8"> 
             <input asp-for="BankAccount" class="form-control" /> 
             <span asp-validation-for="BankAccount" class="text-danger" /> 
            </div> 
           </div> 
          </div> 

         </div> 

        </div> 
       </div> 

       @*ROW TEN*@ 
       <div class="row"> 

        <div class="col-md-4"> 
         <div class="form-group"> 
          <label class="col-md-4 col-lg-4 control-label">Update Form:</label> 
          <div class="col-md-8 col-lg-8"> 
           <input type="submit" value="Save" class="btn btn-default" /> 
          </div> 
         </div> 
        </div> 

       </div> 

       @*Closing DIV for class horizontal*@ 

      </div> 

     </form> 

     <div> 
      <a asp-action="Index">Back to List</a> 
     </div> 

     @section Scripts { 
      <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script> 
      <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script> 


      <script type="text/javascript"> 
       //<![CDATA[ 
       $(document).ready(function() { 



        function abnValidate(value, element) { 
         if (value.length != 11 || isNaN(parseInt(value))) 
          return false; 
         var weighting = 
         [10, 1, 3, 5, 7, 9, 11, 13, 15, 17, 19]; 
         var tally = (parseInt(value[0]) - 1) * weighting[0]; 
         for (var i = 1; i < value.length; i++) { 
          tally += (parseInt(value[i]) * weighting[i]); 
         } 
         return (tally % 89) == 0; 
        } 
        jQuery.validator.addMethod(
        'abnValidate', 
        $("#ABN"), 'This ABN is not valid' 
        ); 


       }); 

       //]]></script> 

     } 

Answer 1

あなたの例から、以下を追加する必要があります。おそらくフォームフィールド<input type="text" name="abnValidate" />を検証したいカスタム追加メソッドを使用しています。 abnValidateフィールドを有効にするには、カスタムメソッドでtrueを返す必要があります。メソッドがfalseを返す場合は、第3引数として入力したメッセージをaddMethodに返します。

jQuery.validator.addMethod()

Description: Add a custom validation method. It must consist of a name (must be a legal javascript identifier), a javascript based function and a default string message.

method Type: Function()
The actual method implementation, returning true if an element is valid. First argument: Current value. Second argument: Validated element. Third argument: Parameters.

もう1つの方法は、フォームデータをどのように送信するかです。 validateプラグインはフォームを送信しません。要素を検証メソッドに関連付ける特定のルールを定義することによって、検証するために指定したフィールドを検証します。フォームを送信するために使用されるHTTPメソッドを定義するフォーム要素、またはフォームデータの処理を処理するURIを定義する属性を提供していないため、あなたが何をしているかを伝えるのが難しくなります。 validateプラグインを使用するための情報をフォームに入力する必要はありません。

validateメソッドには、フォームが有効な場合に呼び出される実際のフォーム送信を処理するためのコールバックであるsubmitHandlerオプションがあります。あなたがドキュメントから伝えることができたよう

submitHandler(default: native form submit)

Type: Function()
Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it is validated.

は、あなたは自分のフォームデータにAJAXを経由してフォームデータを送信したり、他の最適化を行うためにsubmitHandlerを使用することができます。

短いストーリーにする。 これは、これがどのようなものかの例です。 お手伝いをしてください。

$(function() { 
 

 
    // Your custom validation method added to the validate plugin 
 
    jQuery.validator.addMethod('abnValidate', function abnValidate(value, element) { 
 
    if (value.length != 11 || isNaN(parseInt(value))) 
 
     return false; 
 
    var weighting = 
 
     [10, 1, 3, 5, 7, 9, 11, 13, 15, 17, 19]; 
 
    var tally = (parseInt(value[0]) - 1) * weighting[0]; 
 
    for (var i = 1; i < value.length; i++) { 
 
     tally += (parseInt(value[i]) * weighting[i]); 
 
    } 
 
    return (tally % 89) == 0; 
 
    }, 'This ABN is not valid'); 
 

 
    // call the validate method on your form element. 
 
    $(".validation-form").validate({ 
 
    debug: true, 
 
    // define a rule for the form field which will make use of your abnValidate method. 
 
    rules: { 
 
     "abnValidate": { 
 
     abnValidate: true, 
 
     } 
 
    }, 
 
    submitHandler: function (form) { 
 
     // 'form' is your form element being validated, do somethig with it. 
 

 
     var data = $(form).serializeArray(); 
 
     console.log(data); 
 
     
 
    } 
 
    }); 
 

 
});

<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.15.0/jquery.validate.min.js"></script> 
 
<form class="validation-form"> 
 
    <input type="text" name="abnValidate" /> 
 
    <button class="submit-form">submit</button> 
 
</form> 
 

 
<div class="form-status">form not yet submitted</div>

Answer 2

あなたが実際に上記のフォームのvalidateメソッドを呼び出している場合、それは本当に明確ではない、どことどこか

​​