我有一个表单,其中包含基于一个下拉列表的一系列字段,以下输入字段需要更改其有效性。
一个示例,我通过以下方法对此进行设置:
$("#Identifier").attr("pattern", "[0-9]{11}");
$("#Identifier").attr("oninvalid", "setCustomValidity('Must be 11 digits.')");
然后依次显示:
<input type="text" pattern="[0-9]{11}" name="Identifier" id="Identifier" required="" oninvalid="setCustomValidity('Must be 11 digits.')">
但是,无论我何时输入该字段,它始终会在该字段上显示错误。
我不确定如何获得积极的结果或我缺少的东西。
编辑:
这是我的完整代码:
<body>
<form id="form1" runat="server">
<div id="main-bg">
<table width="960" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" class="style67">
<div id="main"><div class="style9" style="width: 701px">
<!-- Main //-->
<br />
<br />
<span class="auto-style1">
<div id="main-title" class="style54" style="width: 475px">
Choose your primary country of nationality</div></span>
<br class="auto-style1" />
<select id = "CountrySelect" required>
<option value="">Choose your country</option>
<option value="Austria">Austria</option>
<option value="Belgium">Belgium</option>
<option value="Bulgaria">Bulgaria</option>
<option>Croatia</option>
<option>All other countries</option> </select>
<br />
<br />
<span class="auto-style1">Select your National Identifier type:</span><br class="auto-style1" />
<select id = "IdentifierSelect" required class="auto-style2">
</select>
<span class="auto-style1">
<br />
<br />
Enter the value</span><br/>
<input type="text" pattern="" name="Identifier" id="Identifier" required><br />
<span class="auto-style1"><strong>
<br />
</strong></span>
<div id="main-title" class="style54" style="width: 475px">
<!-- Title //-->
<% IF strWebCountry = "" Then
Response.Write("<input name=Submit type=submit value=""Maturity Instructions"" /></form></p>")
else
Response.Write("")
end if
%>
</div>
</div> </td>
</tr>
</table>
<div id="spacer"></div>
</form>
</body>
</html>
<script type="text/javascript">
$('#CountrySelect').on('change', function(){
console.log($('#CountrySelect').val());
$('#IdentifierSelect').html('');
if($('#CountrySelect').val()=="Austria"){
$('#IdentifierSelect').append('<option value="CONCAT">CONCAT</option>');
$("#Identifier").attr("pattern", "[0-9A-Z]{8}");
}
else if($('#CountrySelect').val()=="Belgium"){
$('#IdentifierSelect').append('<option value="Belgian National Number">Belgian National Number</option>');
$('#IdentifierSelect').append('<option value="CONCAT">CONCAT</option>');
}
else if($('#CountrySelect').val()=="Bulgaria"){
$('#IdentifierSelect').append('<option value="Bulgarian Personal Number">Bulgarian Personal Number</option>');
$('#IdentifierSelect').append('<option value="CONCAT">CONCAT</option>');
}
else{
$('#IdentifierSelect').append('<option value="National Passport Number">National Passport Number</option>');
$('#IdentifierSelect').append('<option value="CONCAT">CONCAT</option>');
}
});
</script>
<script type="text/javascript">
$('#Identifier').on('focus', function(){
console.log($('#IdentifierSelect').val());
$('#IdentifierSelect12').html('');
if($('#IdentifierSelect').val()=="Belgian National Number"){
$("#Identifier").attr("pattern", "[0-9]{11}");
$("#Identifier").attr("oninvalid", "setCustomValidity('Must be 11 digits.')");
$("#Identifier").attr("required");
}
});
</script>