jquery/javascript alert, если все поля не заполнены

Question

У меня есть форма, которую я хотел бы предупредить людей, если ВСЕ поля не будут заполнены. В настоящее время я использую скрипт проверки jquery для обязательных полей, но мне нужно это, чтобы люди знали, что не все поля заполняются перед сохранением (они не являются обязательными полями, а просто позволяют им знать, что форма не завершено).

поля формы являются:

тип, статус, рейтинг, cterms, CompanyID, компания, имя, фамилия, адрес, пригород, город, страна, PCODE, телефон, электронная почта и комментарии

Если бы кто-то помог мне с этим, это было бы здорово, я не возражаю, если это с jquery или javascript, просто что-то, что предупредит, что не все поля завершены, и если они хотят продолжить сохранение или нет.

Приветствия

Лиан

РЕДАКТИРОВАТЬ:

Вот форма:

<form action="/index.php?option=com_database&view=add&Itemid=3&task=save" method="post" name="adminForm" id="adminForm"> 
    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td width="50%" align="left" valign="top"><table width="100%" border="0" cellspacing="2" cellpadding="3"> 
      <tr> 
      <td align="left" valign="middle" nowrap="nowrap" class="key"><strong> </strong></td> 
      <td></td> 
      </tr> 
      <tr> 
      <td align="left" valign="middle" nowrap="nowrap" class="key"><strong>Active:</strong></td> 
      <td><table border="0" cellspacing="0" cellpadding="0"> 
       <tr> 
        <td align="left" valign="middle"><input type="radio" name="published" id="published0" value="0" checked="checked" /></td> 
        <td align="left" valign="middle">&nbsp;</td> 
        <td align="left" valign="middle"><label for="published0">No</label> 
        </td> 
        <td align="left" valign="middle">&nbsp;</td> 
        <td align="left" valign="middle"><input type="radio" name="published" id="published1" value="1" /></td> 
        <td align="left" valign="middle">&nbsp;</td> 
        <td align="left" valign="middle"><label for="published1">Yes</label></td> 
       </tr> 
       </table></td> 
      </tr> 
      <tr> 
      <td align="left" valign="middle" nowrap="nowrap" class="key"><strong>Date:</strong></td> 
      <td align="left" valign="middle" nowrap="nowrap" class="admintable"><input class="text_area" type="text" name="date" id="date" size="30" value="22/09/2009" disabled="disabled" style="width: 200px;" /> 
      </td> 
      </tr> 
      <tr> 
      <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Type:</strong></td> 
      <td><select name="type" id="type" size="1" class="validate[required]" style="width: 205px;"> 
       <option value="">- Select Type -</option> 
       <option value="1">Customer</option> 
       <option value="2">Supplier</option> 
       </select></td> 
      </tr> 
      <tr class="admintable"> 
      <td align="left" valign="middle" nowrap="nowrap" class="key"><strong>Status:</strong></td> 
      <td align="left" valign="middle" nowrap="nowrap"><select name="status" id="status" size="1" class="validate[required]" style="width: 205px;"> 
       <option value="">- Select Status -</option> 
       <option value="1">Existing</option> 
       <option value="2">Potential</option> 
       </select></td> 
      </tr> 
      <tr> 
      <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Rating:</strong></td> 
      <td><select name="rating" id="rating" size="1" class="validate[required]" style="width: 205px;"> 
       <option value="">- Select Rating -</option> 
       <option value="1">Principal</option> 
       <option value="2">Secondary</option> 
       <option value="3">Minor</option> 
       </select></td> 
      </tr> 
      <tr class="admintable"> 
      <td align="left" valign="middle" nowrap="nowrap" class="key"><strong>Credit Terms:</strong></td> 
      <td align="left" valign="middle" nowrap="nowrap"><select name="cterms" id="cterms" size="1" class="validate[required]" style="width: 205px;"> 
       <option value="">- Select Credit Terms -</option> 
       <option value="1">COD</option> 
       <option value="2">30 Days</option> 
       <option value="3">60 Days</option> 
       <option value="4">90 Days</option> 
       </select></td> 
      </tr> 
      <tr> 
      <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Database:</strong></td> 
      <td><select name="companyid" id="companyid" size="1" class="validate[required]" style="width: 205px;"> 
       <option value="">- Select Database -</option> 
       <option value="2">Cody Opal</option> 
       <option value="1">National Opal Collection</option> 
       </select></td> 
      </tr> 
      <tr> 
      <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Company:</strong></td> 
      <td><input class="validate[required] text_area" type="text" name="company" id="company" size="30" value="" style="width: 200px;" /></td> 
      </tr> 
      <tr> 
      <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Address:</strong></td> 
      <td><input class="validate[required] text_area" type="text" name="address" id="address" size="30" value="" style="width: 200px;" /></td> 
      </tr> 
      <tr> 
      <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Address 2:</strong></td> 
      <td><input class="text_area" type="text" name="address2" id="address2" size="30" value="" style="width: 200px;" /></td> 
      </tr> 
      <tr> 
      <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Suburb:</strong></td> 
      <td><input class="validate[required] text_area" type="text" name="suburb" id="suburb" size="30" value="" style="width: 200px;" /></td> 
      </tr> 
      <tr> 
      <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>City:</strong></td> 
      <td><input class="validate[required] text_area" type="text" name="city" id="city" size="30" value="" style="width: 200px;" /></td> 
      </tr> 
      <tr> 
      <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>State:</strong></td> 
      <td><div id="entry_state1"> 
       <input class="validate[required] text_area" type="text" name="state" id="state" size="30" value="" style="width: 200px;" /> 
       </div></td> 
      </tr> 
      <tr> 
      <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Postcode:</strong></td> 
      <td><input class="validate[required] text_area" type="text" name="pcode" id="pcode" size="30" value="" style="width: 200px;" /></td> 
      </tr> 
      <tr> 
      <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Country:</strong></td> 
      <td><select name="country" id="country" onChange="javascript: loadstate1();" class="selectstate validate[required]"> 
       <option value="">- Select Country -</option> 
       </select></td> 
      </tr> 
      <tr> 
      <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Primary Contact Name:</strong></td> 
      <td align="left" valign="middle" nowrap="nowrap"><input class="validate[required] text_area" type="text" name="name" id="name" size="30" value="" style="width: 200px;" /></td> 
      </tr> 
      <tr> 
      <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Primary Contact Surname:</strong></td> 
      <td align="left" valign="middle" nowrap="nowrap"><input class="text_area" type="text" name="surname" id="surname" size="30" value="" style="width: 200px;" /></td> 
      </tr> 
      <tr> 
      <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Primary Contact Position:</strong></td> 
      <td align="left" valign="middle" nowrap="nowrap"><input class="text_area" type="text" name="position" id="position" size="30" value="" style="width: 200px;" /></td> 
      </tr> 
      <tr> 
      <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Primary Contact Email:</strong></td> 
      <td align="left" valign="middle" nowrap="nowrap"><input class="validate[required,custom[email]] text_area" type="text" name="email" id="email" size="30" value="" style="width: 200px;" /></td> 
      </tr> 
      <tr> 
      <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Secondary Contact:</strong></td> 
      <td align="left" valign="middle" nowrap="nowrap"><input class="text_area" type="text" name="contact" id="contact" size="30" value="" style="width: 200px;" /></td> 
      </tr> 
      <tr> 
      <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Phone - Business:</strong></td> 
      <td align="left" valign="middle" nowrap="nowrap"><input class="validate[required] text_area" name="country_code[]" type="text" id="country_code" value="+" size="2" maxlength="5" style="width: 33px;" /> 
       <input class="validate[required,custom[telephone]] text_area" type="text" name="phone_b" id="phone_b" size="22" value="" style="width: 160px;" /></td> 
      </tr> 
      <tr> 
      <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Phone - Direct:</strong></td> 
      <td align="left" valign="middle" nowrap="nowrap"><input class="text_area" name="country_code[]" type="text" id="country_code" value="+" size="2" maxlength="5" style="width: 33px;" /> 
       <input class="validate[optional,custom[telephone]] text_area" type="text" name="phone_d" id="phone_d" size="22" value="" style="width: 160px;" /></td> 
      </tr> 
      <tr> 
      <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Phone - Mobile:</strong></td> 
      <td align="left" valign="middle" nowrap="nowrap"><input class="text_area" name="country_code[]" type="text" id="country_code" value="+" size="2" maxlength="5" style="width: 33px;" /> 
       <input class="validate[optional,custom[telephone]] text_area" type="text" name="phone_m" id="phone_m" size="22" value="" style="width: 160px;" /></td> 
      </tr> 
      <tr> 
      <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Phone - Personal:</strong></td> 
      <td align="left" valign="middle" nowrap="nowrap"><input class="text_area" name="country_code[]" type="text" id="country_code" value="+" size="2" maxlength="5" style="width: 33px;" /> 
       <input class="validate[optional,custom[telephone]] text_area" type="text" name="phone_p" id="phone_p" size="22" value="" style="width: 160px;" /></td> 
      </tr> 
      <tr> 
      <td align="left" valign="middle" nowrap="nowrap" class="key"><strong>Fax:</strong></td> 
      <td align="left" valign="middle" nowrap="nowrap"><input class="text_area" name="country_code[]" type="text" id="country_code" value="+" size="2" maxlength="5" style="width: 33px;" /> 
       <input class="validate[optional,custom[telephone]] text_area" type="text" name="phone_f" id="phone_f" size="22" value="" style="width: 160px;" /></td> 
      </tr> 
      <tr> 
      <td width="160" align="left" valign="top" nowrap="nowrap" class="key"><strong>Customer Comments:</strong></td> 
      <td align="left" valign="middle" nowrap="nowrap"><textarea name="comments" id="comments" cols="30" rows="7"></textarea></td> 
      </tr> 
     </table></td> 
    </tr> 
    <tr> 
     <td colspan="2" align="left" valign="top"><table width="100%" border="0" cellspacing="2" cellpadding="3"> 
      <tr> 
      <td width="160" align="left" valign="top" nowrap="nowrap" class="key"><strong>Classifications: </strong></td> 
      <td><div class="company_1"> 
       <table width="135" border="0" cellspacing="0" cellpadding="0" align="left" style="border: solid 1px #ff0000; margin-right: 10px; background-color: #ff0000; background-image: url(/templates/home/scripts/opacity.png);" class="classTables"> 
        <tr> 
        <td colspan="2" align="center" valign="middle" style="background-color: #ff0000; background-image: none; padding: 2px 2px 2px 2px;"><strong>OTHER</strong></td> 
        </tr> 
        <tr> 
        <td align="center" valign="middle" width="20"><input type="checkbox" name="classifications[70]" id="classifications[70]" value="70" class="checkbox" /></td> 
        <td align="left" valign="middle"><label for="classifications[70]">VIP Client</label></td> 
        </tr> 
        <tr> 
        <td align="center" valign="middle" width="20"><input type="checkbox" name="classifications[71]" id="classifications[71]" value="71" class="checkbox" /></td> 
        <td align="left" valign="middle"><label for="classifications[71]">Retailer</label></td> 
        </tr> 
        <tr> 
        <td align="center" valign="middle" width="20"><input type="checkbox" name="classifications[72]" id="classifications[72]" value="72" class="checkbox" /></td> 
        <td align="left" valign="middle"><label for="classifications[72]">Media</label></td> 
        </tr> 
        <tr> 
        <td align="center" valign="middle" width="20"><input type="checkbox" name="classifications[73]" id="classifications[73]" value="73" class="checkbox" /></td> 
        <td align="left" valign="middle"><label for="classifications[73]">Consultant</label></td> 
        </tr> 
        <tr> 
        <td align="center" valign="middle" width="20"><input type="checkbox" name="classifications[74]" id="classifications[74]" value="74" class="checkbox" /></td> 
        <td align="left" valign="middle"><label for="classifications[74]">Contractor</label></td> 
        </tr> 
        <tr> 
        <td align="center" valign="middle" width="20"><input type="checkbox" name="classifications[75]" id="classifications[75]" value="75" class="checkbox" /></td> 
        <td align="left" valign="middle"><label for="classifications[75]">Other</label></td> 
        </tr> 
       </table> 
       </div></td> 
      </tr> 
     </table></td> 
    </tr> 
    </table> 
    <input type="submit" name="submit" value="Add New Client" /> 
</form> 

Answer 1

Вот быстрый макет:

$(document).ready(function() { 
    $('form').submit(function() { 
     var incomplete = $('form :input').filter(function() { 
          return $(this).val() == ''; 
         }); 
     //if incomplete contains any elements, the form has not been filled 
     if(incomplete.length) { 
      alert('please fill out the form'); 
      //to prevent submission of the form 
      return false; 
     } 
    }); 
}); 

Answer 2

Цикл по каждому входному элементу в форме:

$(':input', formName).each(function() { 
    // Check for completion of each input type 
}) 

Answer 3

function checkEmpty() { 
     var empty = false; 
     $("input").each(function() { 
      empty = ($(this).val() == "") ? true : empty; 
     }); 
     if(empty) { 
      var empty_ok = confirm("Are you Ok with leaving stuff empty?"); 
      return empty_ok; 
     } 

подтверждение возвращает true, если они нажимают yes и false, если они нажимают no. Верните это к основному валидатору как значение, которое нужно передать в событие submit().

Answer 4

(Вот почему я попросил разметку, прежде чем слепо отвечая)

Я не думаю, что какое-либо из указанных выше счета решений для логики только один флажок флажков должен быть проверен, и вы не должны просто проверять, имеет ли каждое из них значение, или все они будут иметь один по умолчанию. Вот моя версия, которая полагается на div, в который входят флажки, чтобы иметь класс 'checkboxgroup'.

Кроме того, элементы, которые не заполнены, заполняются массивом «errorElements», через который вы можете прокручивать и добавлять предупреждения.

$(function() { 
$('#adminForm').submit(function (event) { 
    var errorElements = window.errorElements = [], valid = false; 

    $(':input', this).not(':checkbox').each(function() { 
    var val = $(this).val(); 
    if (!val.length) { 
     valid = false; 
     errorElements.push(this); 
    } 
    }); 

    $('.checkboxgroup', this).each(function() { 
    var checkBoxes = $(':checkbox', this), oneChecked = false; 
    checkBoxes.each(function() { 
     if (!oneChecked && !$(this).is(':checked')) { 
     valid = false; 
     errorElements.push(this); 
     } else { 
     oneChecked = true; 
     } 
    }); 
    }); 

    if (!errorElements.length) { 
    valid = true; 
    } 

    if (!valid) { 
    event.preventDefault(); 
    alert('please fill in all form fields.'); 
    } else { 
    alert('congratulations'); 
    } 

}); 
}); 

Checkbox Отрывок:

<div class="company_1 checkboxgroup"> 
       <table width="135" border="0" cellspacing="0" cellpadding="0" align="left" style="border: solid 1px #ff0000; margin-right: 10px; background-color: #ff0000; background-image: url(/templates/home/scripts/opacity.png);" class="classTables"> 
        <tr> 
        <td colspan="2" align="center" valign="middle" style="background-color: #ff0000; background-image: none; padding: 2px 2px 2px 2px;"><strong>OTHER</strong></td> 
        </tr> 
        <tr> 
        <td align="center" valign="middle" width="20"><input type="checkbox" name="classifications[70]" id="classifications[70]" value="70" class="checkbox" /></td> 
        <td align="left" valign="middle"><label for="classifications[70]">VIP Client</label></td> 

Если у вас есть несколько групп флажок просто элемент, окружающий их с классом .checkboxgroup.