как подтвердить форму в jQuery

Question

Когда я отправлю уведомление о форме, будет показано, но после перенаправления страницы.

У меня есть функция вызова кнопки отправки при нажатии. предупреждения будет отображаться и после того, как форма будет занесена , пожалуйста, дайте мне идею проверки образует

function companyFormValidation() 
    { 
     var name = document.getElementById('companyname').value; 
     var title = document.getElementById('companytitle').value; 
     var desc = document.getElementById('description').value; 
     var logo = document.getElementById('logo').value; 
     var email = document.getElementById('emailid').value; 
     var website = document.getElementById('siteurl').value; 
     var phonenumber = document.getElementById('phonenumber').value; 
     var faxNumber = document.getElementById('faxNumber').value; 
     var address  = document.getElementById('address').value; 
     var latitude = document.getElementById('latitude').value; 
     var longitude = document.getElementById('longitude').value; 

     if(name == '') 
     { 
      alert('Name can not empty'); 
      //$("#ename").html("Name can't be empty.."); 

     } 
    } 



<form id="addCompanyForm" method="post" action="#" class="form-horizontal" > 
        <fieldset> 
         <legend>Company </legend> 
          <div class="form-group"> 
           <label class="col-lg-3 control-label">Name</label> 
           <div class="col-lg-5"> 
            <input type="text" class="form-control" name="companyname" id='companyname' /> 
            <div id="ename"></div> 
           </div> 

          </div> 

          <div class="form-group"> 
           <label class="col-lg-3 control-label">Title</label> 
           <div class="col-lg-5"> 
            <input type="text" class="form-control" name="companytitle" id="companytitle" /> 
            <div id="etitle"></div> 
           </div> 

          </div> 
          <div class="form-group"> 
           <label class="col-lg-3 control-label">Description</label> 
           <div class="col-lg-5"> 
           <textarea class="form-control" name="description" id = "description"></textarea> 
           <div id="edesc"></div> 
           </div> 
          </div> 

          <div class="form-group"> 
           <label class="col-lg-3 control-label">Logo</label> 
            <div class="col-lg-5"> 
             <input type="file" class="form-control" name='logo' id="logo" > 
             <!-- <span class="input-group-btn"> 
              <span class="btn btn-default btn-file"> 
               Browse&hellip; <input type="file" name=""> 
              </span> 
             </span> --> 
            </div> 
           </div> 

           <div class="form-group"> 
            <label class="col-lg-3 control-label">Email </label> 
           <div class="col-lg-5"> 
            <input type="text" class="form-control" name="emailid" id="emailid"/> 
           </div> 
          </div> 

          <div class="form-group"> 
           <label class="col-lg-3 control-label">Website</label> 
           <div class="col-lg-5"> 
            <input type="text" class="form-control" name="siteurl" placeholder="http://" id="siteurl" /> 
           </div> 
          </div> 

          <div class="form-group"> 
           <label class="col-lg-3 control-label">Phone number</label> 
           <div class="col-lg-5"> 
            <input type="text" class="form-control" name="phonenumber" id="phonenumber"/> 
           </div> 
          </div> 

          <div class="form-group"> 
           <label class="col-lg-3 control-label">Fax number</label> 
           <div class="col-lg-5"> 
            <input type="text" class="form-control" name="faxNumber" id="faxNumber" /> 
           </div> 
          </div> 

          <div class="form-group"> 
           <label class="col-lg-3 control-label">Address</label> 
           <div class="col-lg-5"> 
           <textarea class="form-control" name="address" id="address"></textarea> 
           </div> 
          </div> 

          <div class="form-group"> 
           <label class="col-lg-3 control-label">Latitude</label> 
           <div class="col-lg-5"> 
            <input type="text" class="form-control" name="latitude" id="latitude" /> 
           </div> 
          </div> 
          <div class="form-group"> 
           <label class="col-lg-3 control-label">Longitude</label> 
           <div class="col-lg-5"> 
            <input type="text" class="form-control" name="longitude" id="longitude" /> 
           </div> 
          </div> 
         </fieldset> 

         <div class="form-group"> 
          <div class="col-lg-9 col-lg-offset-3"> 
           <button type="submit" class="btn btn-primary" onclick="companyFormValidation()" >Submit</button> 
          </div> 
         </div> 
        </form> 

Answer 1

Вот код с возвратом false, если какое-либо поле пуст.

<script> 
    function companyFormValidation() 
     { 
      var name = document.getElementById('companyname').value; 
      var title = document.getElementById('companytitle').value; 
      var desc = document.getElementById('description').value; 
      var logo = document.getElementById('logo').value; 
      var email = document.getElementById('emailid').value; 
      var website = document.getElementById('siteurl').value; 
      var phonenumber = document.getElementById('phonenumber').value; 
      var faxNumber = document.getElementById('faxNumber').value; 
      var address  = document.getElementById('address').value; 
      var latitude = document.getElementById('latitude').value; 
      var longitude = document.getElementById('longitude').value; 

      if(name == '') 
      { 
       alert('Name can not empty'); 
       //$("#ename").html("Name can't be empty.."); 
       return false; 
      } 
     } 

    </script> 

    <form id="addCompanyForm" method="post" action="#" onsubmit="return companyFormValidation()" class="form-horizontal" > 
         <fieldset> 
          <legend>Company </legend> 
           <div class="form-group"> 
            <label class="col-lg-3 control-label">Name</label> 
            <div class="col-lg-5"> 
             <input type="text" class="form-control" name="companyname" id='companyname' /> 
             <div id="ename"></div> 
            </div> 

           </div> 

           <div class="form-group"> 
            <label class="col-lg-3 control-label">Title</label> 
            <div class="col-lg-5"> 
             <input type="text" class="form-control" name="companytitle" id="companytitle" /> 
             <div id="etitle"></div> 
            </div> 

           </div> 
           <div class="form-group"> 
            <label class="col-lg-3 control-label">Description</label> 
            <div class="col-lg-5"> 
            <textarea class="form-control" name="description" id = "description"></textarea> 
            <div id="edesc"></div> 
            </div> 
           </div> 

           <div class="form-group"> 
            <label class="col-lg-3 control-label">Logo</label> 
             <div class="col-lg-5"> 
              <input type="file" class="form-control" name='logo' id="logo" > 
              <!-- <span class="input-group-btn"> 
               <span class="btn btn-default btn-file"> 
                Browse&hellip; <input type="file" name=""> 
               </span> 
              </span> --> 
             </div> 
            </div> 

            <div class="form-group"> 
             <label class="col-lg-3 control-label">Email </label> 
            <div class="col-lg-5"> 
             <input type="text" class="form-control" name="emailid" id="emailid"/> 
            </div> 
           </div> 

           <div class="form-group"> 
            <label class="col-lg-3 control-label">Website</label> 
            <div class="col-lg-5"> 
             <input type="text" class="form-control" name="siteurl" placeholder="http://" id="siteurl" /> 
            </div> 
           </div> 

           <div class="form-group"> 
            <label class="col-lg-3 control-label">Phone number</label> 
            <div class="col-lg-5"> 
             <input type="text" class="form-control" name="phonenumber" id="phonenumber"/> 
            </div> 
           </div> 

           <div class="form-group"> 
            <label class="col-lg-3 control-label">Fax number</label> 
            <div class="col-lg-5"> 
             <input type="text" class="form-control" name="faxNumber" id="faxNumber" /> 
            </div> 
           </div> 

           <div class="form-group"> 
            <label class="col-lg-3 control-label">Address</label> 
            <div class="col-lg-5"> 
            <textarea class="form-control" name="address" id="address"></textarea> 
            </div> 
           </div> 

           <div class="form-group"> 
            <label class="col-lg-3 control-label">Latitude</label> 
            <div class="col-lg-5"> 
             <input type="text" class="form-control" name="latitude" id="latitude" /> 
            </div> 
           </div> 
           <div class="form-group"> 
            <label class="col-lg-3 control-label">Longitude</label> 
            <div class="col-lg-5"> 
             <input type="text" class="form-control" name="longitude" id="longitude" /> 
            </div> 
           </div> 
          </fieldset> 

          <div class="form-group"> 
           <div class="col-lg-9 col-lg-offset-3"> 
            <button type="submit" class="btn btn-primary" >Submit</button> 
           </div> 
          </div> 
         </form> 

Ваш код написан на js, и вы запрашиваете jquery. Для jquery используйте выше ответ.

Answer 2

Вы можете использовать проверку JS «jquery.validate.min.js» для проверки Jquery. Это просто. Вы хотите демонстрацию, которую вы можете проверить. http://www.sitepoint.com/basic-jquery-form-validation-tutorial/. Надеюсь, это поможет вам, спасибо!