提交时进行HTML验证-始终返回false

时间:2018-08-17 17:20:44

标签: javascript html5 validation

我有一个表单,其中包含基于一个下拉列表的一系列字段,以下输入字段需要更改其有效性。

一个示例,我通过以下方法对此进行设置:

$("#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>

0 个答案:

没有答案