2017-02-24 68 views
1

我已经成功为我的网站在HTML,CSS和JS(具有依赖关系:jQuery和Validation)中创建了一个工作的jQuery.validation表单。问题是当我在干净的ASP.NET Core web项目中使用完全相同的代码时,它似乎没有在JavaScript中使用我的自定义验证参数jQuery.validate不适用于ASP.NET Core

验证在所有情况下均适用。然而,我对.validate([options])定制[options]似乎并没有对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:

.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. 删除jQuery.validation默认的通知选项
  2. 如果<field>无效,父元素的背景色是红色
  3. 如果<field>VALID,父元素的背景色是绿色

注:

  • 更新我的ASP.NET核心(1.1),以最新的稳定版本
    • 降级到ASP.NET Core 1.0来测试
  • 增加通过凉亭最新的jQuery,地方和CDN(用于测试)
  • 增加通过凉亭,地方和CDN(用于测试)
    • 根据验证网站的jQuery的某些版本已被用于最新的验证兼容性。我通过凉亭,本地和CDN测试的所有版本
  • 做了一个原始的HTML,CSS和JS版本的一切剥离出来(依赖包括)中的jsfiddle,CodePen和地方。 一切都很完美但不是在ASP项目。
  • 外部或内联JavaScript,无变化。

我的结论: 验证工作在所有情况下,这意味着这两个ASP.NET核心应用程序和普通HTML - CSS - JS有正常功能验证。

不能正常工作是当我在我的$('form').validate([options]);中提供[options]在ASP.NET核心应用程序中。我不确定为什么我的选项没有被使用。在.validate([options])

+0

令人怀疑,这与ASP.Net(核心或其他)本身 - 除了引用脚本/ css(路径等)有关。当天结束的客户端是客户端,服务器是服务器(后者是所有ASP.Net玩法的味道)。 – EdSF

回答

0

官方jQuery.validate页我想通了这个问题。它与jQuery.validate做([option])对象属性:highlightunhighlight

例如::

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

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

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

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

success的属性完全使用success

它直接与其它两个属性相冲突通过工具提示通知用户无效字段的不同方式。 highlightunhighlight为开发人员提供了更多的自定义方式,以便拥有更多的控制权。

在ASP.NET核心,因为jQuery.validate自带随每个核心ASP.NET Web应用程序,它适用于自己的success财产除了其脚手架的地方建设中。

我解决这个问题的方法是最后明确地调用我的JS脚本并将回调函数放在success函数中的任何函数中。

相关问题