2017-02-24 8 views
1

HTML、CSS、およびJS(依存関係:jQueryと検証)だけで自分のサイトの作業用jQuery.validationフォームを作成しました。問題は、私がクリーンなASP.NET Core Webプロジェクトに入っていて、まったく同じコードを使用していて、JavaScriptでカスタム検証パラメータを使用していないような場合です。jQuery.validateはASP.NETコアでは機能しません

すべてのケースで有効です。 JSFiddle

HTML::

<form method="post"> 
<fieldset> 
    <div class="master"> 
     <input name="name" id="name" placeholder="Name" minlength="2" maxlength="40" required /> 
    </div> 
    <div class="master"> 
     <input name="email" id="email" placeholder="Email Address" type="email" required /> 
    </div> 
    <div class="master"> 
     <input name="company" placeholder="Company Name" /> 
    </div> 
    <div class="master"> 
     <input name="website" placeholder="Website" type="url" required /> 
    </div> 

    <button type="submit">Next</button> 
</fieldset> 
</form> 

CSS:

しかし、 .validate([options])のための私のカスタム [options]は、作業コードのASP.NETコア

例では動作していないようです

.master { 
    padding: 10px; 
    background-color: white; 
} 

.has-error { 
    background-color: red; 
} 

.has-success { 
    background-color: green; 
} 

JS:

$('form').validate({ 
    // This disables the default validation notifications to the user. 
    // Instead I'll be using CSS colors to notify users of valid or invalid fields 
    errorPlacement: function (error, element) { }, 

    // Invalid field produces a red-background in parent element 
    highlight: function(element) { 
    $(element).parent().addClass('has-error').removeClass('has-success'); 
    }, 

    // Valid field produces a green-background in parent element 
    unhighlight: function(element) { 
    $(element).parent().removeClass('has-error').addClass('has-success'); 
    } 
}); 

私はJavaScript .validate([options])は3つの事を行います。

  1. <field>INVALID、親要素の背景色が赤
  2. されている
  3. 場合jQuery.validationのデフォルトの通知オプションを削除
  4. <field>の場合VALID、親要素の背景色がある

注:

  • は、最新の安定版ダウングレード
    • に私のASP.NETコア(1.1)を更新しましたテストするASP.NETコア1.0へ
  • のjQueryの検証のウェブサイト特定のバージョンによると
    • (テスト用)亭、ローカルおよびCDNを経由して、最新の検証を追加しました
    • (テスト用)亭、ローカルおよびCDN経由でjQueryの最新情報を追加しましたために使用する必要があります互換性。私は
  • ローカルとCDN亭を経由してすべてのバージョンは、JSFiddle、CodePenとローカルに( 依存性がを含む)取り除かすべてと生HTML、CSSやJSのバージョンを作ったテスト。 すべてが完全にで動作しましたが、ASPプロジェクトでは動作しませんでした。
  • 外部またはインラインJavaScript、変更はありません。

私の結論: は検証がASP.NET CoreアプリケーションとプレーンHTMLの両方を意味し、すべての場合に動作します - CSS - JS適切に機能検証を持っています。

唯一のことが動作しないは、[options]$('form').validate([options]);にASP.NET Coreアプリケーションで提供するときです。なぜ私のオプションが使われていないのか分かりません。 .validate([options])

+0

これは、ASP.Net(Coreまたはそれ以外の)それ自体がスクリプト/ css(パスなど)を参照するよりもそれ自体が何かをしていることは間違いありません。終わりのクライアントはクライアント、サーバーはサーバーです(後者はASP.Netのすべての味を再生します)。 – EdSF

答えて

0

公式jQuery.validateページには、私はこの問題を、それを考え出しました。それはjQuery.validate([option])オブジェクトのプロパティとしなければならなかった:たとえばhighlightunhighlight

success

それは直接他の二つの特性と競合

$('form').validate({ 
    errorPlacement: function (error, element) { }, 

    highlight: function (element) { 
     // Do stuff 
    }, 

    unhighlight: function (element) { 
     // Do stuff 
    } 

    success: function (element) { 
     // Do stuff 
    } 
}); 

success性が完全にAを使用しツールチップを介して無効なフィールドをユーザーに通知する別の方法。どこでhighlightunhighlightには、より多くの制御を持つ開発者のためのカスタム方法の多くがあります。

ASP.NETコアでは、jQuery.validateはすべてのASP.NETコアWebアプリケーションに同梱されているため、ビルド内のどこかの足場として独自のsuccessプロパティを適用します。

私はこれを回避する方法は、明示的にJSスクリプトを最後に呼び出し、コールバックをsuccess関数内の関数に置くことです。

関連する問題