[英]Box with two form options
我有一個表單,其中顯示一個具有兩個選項的框,一個是“接受”,另一個是“不接受”。 事實證明,當用戶用來發送電子郵件時,他可以使用標記為“不接受”的按鈕來發送電子郵件。 有什么辦法可以使其驗證?
的HTML
<div class="form">
<h4>Valor do consórcio: <span class="slider-value quote-form-element" data-name="Valor | Automóvel" data-slider-id="consorcio-auto">R$ <span></span></span></h4>
<div class="slider" data-slider-min="20000" data-slider-max="100000" data-slider-start="23192" data-slider-step="1000" data-slider-id="consorcio-auto"></div>
<h4>Seus dados:</h4>
<input type="text" name="Nome" placeholder="Nome..." class="quote-form-element" />
<input type="text" name="Cidade" placeholder="Cidade/UF..." class="quote-form-element quote-form-client-email last" />
<input type="text" name="Número de Telefone" placeholder="Telefone..." class="quote-form-element telefone" />
<input type="text" name="Endereço de Email" placeholder="E-mail..." class="quote-form-element quote-form-client-email last contact_email" />
<h4>Política de Privacidade</h4>
<div class="checkbox quote-form-element" data-checked="yes" data-name="Política de Privacidade">
<span class="checkbox-status"><i class="fa fa-check"></i></span>
<span class="checkbox-values">
<span class="checkbox-value-checked" style="font-size: 12px">Li e aceito a politica de privacidade</span>
<span class="checkbox-value-unchecked">Não aceito</span>
</span>
</div>
<button class="button button-navy-blue send-quote" type="button">Simular meu consórcio <i class="fa fa-paper-plane-o"></i></button>
<div class="quote-form-thanks">
<div class="quote-form-thanks-content">
Obrigado pelo seu interesse, retornaremos em breve ;).
<span class="quote-form-thanks-close">Fechar</span>
</div>
</div>
</div>
Java腳本
$('.send-quote').click(function () {
var quoteForm = $(this).parent();
var quoteFormParent = quoteForm.parent().parent();
var insuranceType = quoteFormParent.data('quote-form-for');
var fields = {};
var fieldID = 0;
var fieldName = '';
var fieldValue = '';
var clientName = '';
var clientEmail = '';
var errorFound = false;
quoteForm.find('.quote-form-element').each(function (fieldID) {
fieldName = $(this).attr('name');
if (typeof fieldName == 'undefined' || fieldName === false) {
fieldName = $(this).data('name');
}
if ($(this).hasClass('checkbox')) {
fieldValue = $(this).data('checked') == 'yes' ? $(this).children('.checkbox-values').children('.checkbox-value-checked').text() : $(this).children('.checkbox-values').children('.checkbox-value-unchecked').text();
}
else {
fieldValue = $(this).is('input') || $(this).is('select') ? $(this).val() : $(this).text();
if (($(this).is('input') && fieldValue == '') || ($(this).is('select') && fieldValue == '-')) {
errorFound = true;
$(this).addClass('error');
}
else {
$(this).removeClass('error');
}
}
if ($(this).hasClass('quote-form-client-name')) clientName = $(this).val();
if ($(this).hasClass('quote-form-client-email')) clientEmail = $(this).val();
fields[fieldID] = { 'name': fieldName, 'value': fieldValue };
fieldID++;
});
if (errorFound == false) {
$.ajax({
url: '_assets/submit.php',
data: { 'send': 'quote-form', 'values': fields, 'clientName': clientName, 'clientEmail': clientEmail },
type: 'post',
success: function (output) {
quoteForm.children('.quote-form-thanks').fadeIn(300);
}
});
}
});
頁面顯示“模擬”中的內容。
因此,您需要檢查是否使用無線電輸入checked
“不接受”。
$('.send-quote').click(function() { if ($('[name=terms]:checked').val() === 'no') { console.log('got an error'); } else { console.log('all good'); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="terms" value="yes" checked></input> <label for="terms">Do accept terms</label> <br> <input type="radio" name="terms" value="no"></input> <label for="terms">Don't accept terms</label> <br> <button type="button" class="send-quote">Send Quote</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.