仅在填写表单上的必填字段时触发 OnServerClick

Question

我有一个modal form。它有必填字段。然后，当我在提交 button 上有一个 OnServerClickattribute 时，它​​会绕过必填字段的验证。 （当我删除 OnServerClick 时它会检查）

如何让OnServerClick 仅在填写必填字段时触发？

Modal:

<div   id="my-modal_new" class="modal fade" data-backdrop="static" data-keyboard="false"  tabindex='-1' role='dialog'>
    <div class="modal-dialog edit_modal" id="openModal_new" >
        <div class='modal-content'>
        <div class='modal-header'>
           <span style="font-size: x-large; font-weight:bold;" class='modal-title' id='exampleModalLabel_new'>Supplier information</span>
           <span style="font-size: x-small;">New</span>
            <button class='close' type='button' data-dismiss='modal' aria-label='Close'>
           <span aria-hidden='true' style="font-size: xx-large;">×</span></button>
        </div>
        <div class="modal-body" >

           <div class='form-group'><label for='name'>Name:<span style="color:red">*</span></label><input runat="server" id="modal_name_add"  class='form-control'  style="min-width: 100%" required='required' type='text' name='name'
              placeholder='Enter first name' /></div>
           <div class='form-group'><label for='country'>Country:</label><input runat="server" id="modal_country_add"  class='form-control lastname' style="min-width: 100%"  type='text' name='country' placeholder='Enter Country' 
              /></div>
           <div class='form-group'><label for='state'>State:</label><input runat="server" id="modal_state_add"  class='form-control phone'  style="min-width: 100%" type='text' name='state' placeholder='Enter State'
              /></div>
           <div class='form-group'><label for='street_name'>Street Name:</label><input runat="server" id="modal_street_name_add" style="min-width: 100%"  class='form-control email'  type='text' name='street_name' placeholder='Enter Street Name'
              /></div>
           <div class='form-group'><label for='street_number'>Street #:</label><input runat="server" id="modal_street_number_add" style="min-width: 100%"  class='form-control address' type='text' name='street_number' placeholder='Enter Street #'
              /></div>
           <div class='form-group'><label for='phone1'>Phone # 1:</label><input runat="server" id="modal_phone_number_1_add" style="min-width: 100%"  class='form-control birthday'  type='text' name='phone1'  placeholder='Enter Phone # 1'
              /></div>
           <div class='form-group'><label for='phone2'>Phone # 2:</label><input runat="server" id="modal_phone_number_2_add" style="min-width: 100%"  class='form-control birthday'  type='text' name='phone2'  placeholder='Enter Phone # 2'
              /></div>
           <div class='form-group'><label for='email1'>Email 1:</label><input runat="server" id="modal_email_1_add" style="min-width: 100%"  class='form-control birthday'  type='text' name='email1'  placeholder='Enter Email 1'
              /></div>
           <div class='form-group'><label for='email2'>Email 2:</label><input runat="server" id="modal_email_2_add" style="min-width: 100%"  class='form-control birthday'  type='text' name='email2'  placeholder='Enter Email 2'
              /></div>
           <div class='form-group'><label for='rep_first_name'>Rep First Name:</label><input runat="server" style="min-width: 100%" id="modal_rep_first_name_add"  class='form-control birthday' type='text' name='rep_first_name'   placeholder='Enter Rep First Name'
              /></div>
           <div class='form-group'><label for='rep_last_name'>Rep Last Name:</label><input runat="server" style="min-width: 100%" id="modal_rep_last_name_add"  class='form-control birthday' type='text' name='rep_last_name'  placeholder='Enter Rep Last Name'
              /></div>
           <div class='form-group'><label for='rep_phone'>Rep Phone #:</label><input runat="server" style="min-width: 100%" id="modal_rep_phone_number_add"  class='form-control birthday'  type='text' name='rep_phone'  placeholder='Enter Rep Phone #'
              /></div>
           <div class='form-group'><label for='rep_email'>Rep Email:</label><input runat="server" style="min-width: 100%" id="modal_rep_email_add"  class='form-control birthday'  type='text' name='rep_email'  placeholder='Enter Rep Email'
              /></div>
           <div class='form-group'><label for='website'>Website:</label><input runat="server" style="min-width: 100%" id="modal_website_add"  class='form-control birthday' type='text' name='website'  placeholder='Enter Website'
              /></div>
           <div class='form-group'><label for='gender' >Active:<span style="color:red">*</span></label>
              <span  style="color:green"><input runat="server" id="modal_active_true_add"    required='required'  type='radio' name='Active' value='True' />True</span>
              <span  style="color:red"><input runat="server" id="modal_active_false_add"   required='required' type='radio' name='Active' value='False' />False</span>
           </div>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>

           <input  class='btn btn-primary btn-save-change' OnServerClick="button_update_supplier_information" runat="server" type='submit' value="Add Supplier"/>



        </div>

     </div>
    </div> 
</div>

Answer 1

这是故意的。所需的 balidation 发生在客户端，而 OnServerClick 描述为 here

单击 HtmlButton 控件时会引发 ServerClick 事件。此事件导致发生从客户端到服务器并返回的往返行程。它故意不同于客户端的 OnClick 事件。如果使用 ServerClick 事件运行的代码与客户端 OnClick 事件运行的代码之间存在冲突，则服务器端事件指令将覆盖客户端代码。

您可以选择使用asp:button吗？

<asp:Button runat="server" ID="btnSubmit" OnClick="button_update_supplier_information" />