Отправка форм

Question

У меня есть форма, в которой есть обязательные поля, и она не будет отправлять форму, если вы не заполните необходимые элементы, она работает в google chrome и firefox, но она не работает в сафари. Почему это и кто-нибудь теперь, как сделать это, когда форма не может быть отправлена, если элементы не заполнены, которые требуются. Вот лишь небольшое количество кода.

<form method="post" action="##" name="aForm" id="addClientForm" class=""> 
    <input type="hidden" name="method" value="clientAdd"> 
    <input type="hidden" name="datasource" value="<cfoutput>#request.dsn#</cfoutput>"> 
    <input type="hidden" name="Active" value="1"> 

    <div style="float:left;" class="formContent470"> 
     <table border="0" cellspacing="0" cellpadding="5"> 
     <tr> 
     <th colspan="" style="text-align:left;">Add Client</th> 
     </tr> 
      <tr><cfoutput> 
       <td> 
       Contact 
        <span style="color:red">*</span> 
       <input type="Text" name="Contact" value="" required="Yes" message="Contact is required" maxLength="75" class="inputText430"> 
       </td> 
      </tr> 

И вот код jquery, который должен заставить его работать, я верю.

$(document).ready(function() { 
    $("#addClientForm").validate(); 
     rules: { 
      Contact: { 
       required: true 
      }, 
      ClientName: { 
       required: true 
      }, 
      ClientLogin: { 
       required: true 
      }, 
       ClientPassword: { 
       required: true 
      }, 
      Email: { 
       required: true 
      } 
     }, 
}); 

Спасибо, любая помощь приветствуется.

Answer 1

Это хороший способ заставить его работать со всеми браузерами.

function hasHtml5Validation() { 
    return typeof document.createElement('input').checkValidity === 'function'; 
    } 

if (hasHtml5Validation()) { 
    $('.addClientForm').submit(function (e) { 
     if (!this.checkValidity()) { 
      e.preventDefault(); 
     $(this).addClass('invalid'); 
     $('#status').html('invalid'); 
    } else { 
     $(this).removeClass('invalid'); 
     $('#status').html('submitted'); 
    } 
}); 
} 
<p>Status: <span id="status">Unsubmitted</span></p> 

Answer 2

Вы можете использовать обязательный атрибут в HTML5, чтобы поле было обязательным для заполнения. не требуется javascript.

<input type='text' required name='surName'> 

Answer 3

Код имеет ошибку sintax .. Я поместил правила params на метод validate. На вашем примере параметр, который вы вывели из метода.

$(document).ready(function() { 
    $("#addClientForm").validate({ 
     rules: { 
      Contact: { 
       required: true 
      }, 
      ClientName: { 
       required: true 
      }, 
      ClientLogin: { 
       required: true 
      }, 
       ClientPassword: { 
       required: true 
      }, 
      Email: { 
       required: true 
      } 
     } 
    }); 
});