单选按钮上的不显眼验证被忽略,但它仅适用于相同形式 html 的文本字段
Unobtrusive validation on radio buttons is ignored while it works fine for text fields in same form html only
我正在测试具有 Unobtrusive 验证的表单,这背后没有 MVC 控制器 运行 并且 html 是手写的,仅用于测试(找出它为什么不起作用) 而不是用于生产。
提交表单时,单选按钮没有任何反应(没有错误消息,就像没有任何验证一样),而相同表单中的文本字段会给出验证错误。
我已经放弃了我能想到的任何东西,示例只需要验证器单选按钮和错误消息范围,仅此而已,它仍然不起作用。
我肯定在这里漏掉了一些明显的东西,当有人指出我的错误时,我可能会觉得自己像个白痴,但我还是不能花更多的时间在这上面。
<form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.min.js"></script>
<div class="quote-form__question fl--title">
<div class="split-input--left">
<input class="tooltip form-control input " data-val="true" data-val-length="Please enter a firstname with no more than 20 characters" data-val-length-max="20" data-val-regex="Please enter First name with letters only" data-val-regex-pattern="^ *?[a-zA-Z]+[ a-zA-Z-_']*$"
data-val-required="Please enter your first name" id="CustomerFirstname" maxlength="20" name="CustomerFirstname" placeholder="Name" tabindex="" type="text" value="">
<div class="field-validation-error-container">
<span class="field-validation-valid field-validation-error" data-valmsg-for="CustomerFirstname" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="label-row-full-width">
<label for="q1-1" class="label--un-checked">
<span>Mr</span>
<input type="radio" class="js-check-style js-toggle-question js-show-button" data-val-required="Please select title" name="CustomerTitle" id="q1-1" data-val="Mr" value="Mr">
</label>
<label for="q1-2" class="label--un-checked">
<span>Mrs</span>
<input type="radio" class="js-check-style js-toggle-question js-show-button" data-val-required="Please select title" name="CustomerTitle" id="q1-2" data-val="Mrs" value="Mrs">
</label>
<label for="q1-3" class="label--un-checked">
<span>Miss</span>
<input type="radio" class="js-check-style js-toggle-question js-show-button" data-val-required="Please select title" name="CustomerTitle" id="q1-3" data-val="Miss" value="Miss">
</label>
<label for="q1-4" class="label--un-checked">
<span>Ms</span>
<input type="radio" class="js-check-style js-toggle-question js-show-button" data-val-required="Please select title" name="CustomerTitle" id="q1-4" data-val="Ms" value="Ms">
</label>
<span class="field-validation-valid" data-valmsg-for="CustomerTitle" data-valmsg-replace="true"></span>
</div>
<input type="submit" value="submit" />
</div>
</form>
我错过了什么?
经过一些调查。
我必须做的 - 在后端引入自定义验证器属性 (which I believe is out of scope for question, yet worth linking to)。
这就是它归结为仅前端解决方案的原因。
将单选按钮属性 data-val-required
更改为 data-val-something
加载jquery和验证脚本后注册适配器
<script type="text/javascript" language="javascript">
$.validator.unobtrusive.adapters.addBool("something", "required");
</script>
下面是工作示例:
<form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" language="javascript">
$.validator.unobtrusive.adapters.addBool("mandatory", "required");
</script>
<div class="label-row-full-width">
<label for="q1-1" class="label--un-checked">
<span>Mr</span>
<input type="radio" class="js-check-style js-toggle-question js-show-button valid" data-val-mandatory="Please select title" name="CustomerTitle" id="q1-1" data-val="true" value="Mr">
</label>
<label for="q1-2" class="label--un-checked">
<span>Mrs</span>
<input type="radio" class="js-check-style js-toggle-question js-show-button valid" data-val-mandatory="Please select title" name="CustomerTitle" id="q1-2" data-val="true" value="Mrs">
</label>
<label for="q1-3" class="label--checked">
<span>Miss</span>
<input type="radio" class="js-check-style js-toggle-question js-show-button valid" data-val-mandatory="Please select title" name="CustomerTitle" id="q1-3" data-val="true" value="Miss">
</label>
<label for="q1-4" class="label--un-checked">
<span>Ms</span>
<input type="radio" class="js-check-style js-toggle-question js-show-button valid" data-val-mandatory="Please select title" name="CustomerTitle" id="q1-4" data-val="true" value="Ms">
</label>
<span class="field-validation-valid" data-valmsg-for="CustomerTitle" data-valmsg-replace="true"></span>
</div>
<input type="submit" value="submit" />
</form>
希望这能为您节省一些时间。
我正在测试具有 Unobtrusive 验证的表单,这背后没有 MVC 控制器 运行 并且 html 是手写的,仅用于测试(找出它为什么不起作用) 而不是用于生产。
提交表单时,单选按钮没有任何反应(没有错误消息,就像没有任何验证一样),而相同表单中的文本字段会给出验证错误。
我已经放弃了我能想到的任何东西,示例只需要验证器单选按钮和错误消息范围,仅此而已,它仍然不起作用。
我肯定在这里漏掉了一些明显的东西,当有人指出我的错误时,我可能会觉得自己像个白痴,但我还是不能花更多的时间在这上面。
<form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.min.js"></script>
<div class="quote-form__question fl--title">
<div class="split-input--left">
<input class="tooltip form-control input " data-val="true" data-val-length="Please enter a firstname with no more than 20 characters" data-val-length-max="20" data-val-regex="Please enter First name with letters only" data-val-regex-pattern="^ *?[a-zA-Z]+[ a-zA-Z-_']*$"
data-val-required="Please enter your first name" id="CustomerFirstname" maxlength="20" name="CustomerFirstname" placeholder="Name" tabindex="" type="text" value="">
<div class="field-validation-error-container">
<span class="field-validation-valid field-validation-error" data-valmsg-for="CustomerFirstname" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="label-row-full-width">
<label for="q1-1" class="label--un-checked">
<span>Mr</span>
<input type="radio" class="js-check-style js-toggle-question js-show-button" data-val-required="Please select title" name="CustomerTitle" id="q1-1" data-val="Mr" value="Mr">
</label>
<label for="q1-2" class="label--un-checked">
<span>Mrs</span>
<input type="radio" class="js-check-style js-toggle-question js-show-button" data-val-required="Please select title" name="CustomerTitle" id="q1-2" data-val="Mrs" value="Mrs">
</label>
<label for="q1-3" class="label--un-checked">
<span>Miss</span>
<input type="radio" class="js-check-style js-toggle-question js-show-button" data-val-required="Please select title" name="CustomerTitle" id="q1-3" data-val="Miss" value="Miss">
</label>
<label for="q1-4" class="label--un-checked">
<span>Ms</span>
<input type="radio" class="js-check-style js-toggle-question js-show-button" data-val-required="Please select title" name="CustomerTitle" id="q1-4" data-val="Ms" value="Ms">
</label>
<span class="field-validation-valid" data-valmsg-for="CustomerTitle" data-valmsg-replace="true"></span>
</div>
<input type="submit" value="submit" />
</div>
</form>
我错过了什么?
经过一些调查。
我必须做的 - 在后端引入自定义验证器属性 (which I believe is out of scope for question, yet worth linking to)。
这就是它归结为仅前端解决方案的原因。
将单选按钮属性
data-val-required
更改为data-val-something
加载jquery和验证脚本后注册适配器
<script type="text/javascript" language="javascript"> $.validator.unobtrusive.adapters.addBool("something", "required"); </script>
下面是工作示例:
<form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" language="javascript">
$.validator.unobtrusive.adapters.addBool("mandatory", "required");
</script>
<div class="label-row-full-width">
<label for="q1-1" class="label--un-checked">
<span>Mr</span>
<input type="radio" class="js-check-style js-toggle-question js-show-button valid" data-val-mandatory="Please select title" name="CustomerTitle" id="q1-1" data-val="true" value="Mr">
</label>
<label for="q1-2" class="label--un-checked">
<span>Mrs</span>
<input type="radio" class="js-check-style js-toggle-question js-show-button valid" data-val-mandatory="Please select title" name="CustomerTitle" id="q1-2" data-val="true" value="Mrs">
</label>
<label for="q1-3" class="label--checked">
<span>Miss</span>
<input type="radio" class="js-check-style js-toggle-question js-show-button valid" data-val-mandatory="Please select title" name="CustomerTitle" id="q1-3" data-val="true" value="Miss">
</label>
<label for="q1-4" class="label--un-checked">
<span>Ms</span>
<input type="radio" class="js-check-style js-toggle-question js-show-button valid" data-val-mandatory="Please select title" name="CustomerTitle" id="q1-4" data-val="true" value="Ms">
</label>
<span class="field-validation-valid" data-valmsg-for="CustomerTitle" data-valmsg-replace="true"></span>
</div>
<input type="submit" value="submit" />
</form>
希望这能为您节省一些时间。