Огонь OnServerClick только тогда, когда обязательные поля в форме заполнены

Question

У меня есть modal form. Это обязательные поля. Затем, когда у меня есть атрибут OnServerClick для отправки button, он обходит проверку обязательных полей. (Он проверяет, когда я удаляю 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

Это намеренно. Требуемая проверка происходит на стороне клиента, тогда как OnServerClick, как описано здесь

Событие ServerClick возникает при нажатии элемента управления HtmlButton. Это событие вызывает прохождение туда и обратно от клиента к серверу и обратно. Он сознательно отличается от события OnClick на стороне клиента. Если существует конфликт между кодом, запускаемым событием ServerClick, и кодом, запускаемым событием OnClick на стороне клиента, инструкции события на стороне сервера будут переопределять код на стороне клиента.

Это опция для вам использовать asp:button?

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