javascript — php форма с проблемой проверки jquery
** Обновлено с дополнительным кодом **
Я делаю редизайн сайта для кого-то и повторно использую код php от предыдущего разработчика. Форма отправляет и выполняет проверку на стороне сервера на странице процесса. Это явно плохо с точки зрения пользовательского опыта. Я пытаюсь включить проверку JQuery. Я более дизайнер и имею ограниченные знания в области php и умеренного jquery.
Это довольно простая форма, которая имеет 2 варианта отправки в конце. 1 кнопка для оплаты чеком, 1 для PayPal.
Код, используемый для этих кнопок, полностью игнорирует мою проверку формы jquery. Если я вставлю простую кнопку отправки, проверка JQuery пинает.
Это код для двух используемых кнопок.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$('form').validate();
});
</script>
<form id="lx" class="form-horizontal" action="reg_process.php" method="post" name="regform"><div class="row mbs">
<label class="control-label col-sm-4" for="firstname"><span class="font-standout">*</span> First Name: </label>
<div class="col-sm-8">
<input type="text" id="firstname" name="FirstName" class="form-control input-lg mrs mls" min="2" required />
</div>
</div><a href="javascript:void(0)" onclick="document.regform.Submit.value = 'PayPal'; document.regform.submit()" class="btn btn-primary">
<i class="fa fa-paypal"></i><br/>
Pay with Paypal Online
</a>
<a href="javascript:void(0)" onclick="document.regform.submit()" class="btn btn-primary" >
<i class="fa fa-check"></i><br/>
Pay By Check
</a>
Кнопки просто передают PayPal или NULL на страницу процесса отправки формы, а затем перенаправляют после этого. Есть ли способ, которым я могу сделать это пройти проверку JQuery и затем отправить с этими значениями?
Решение
Вам просто нужно добавить объект правил для FirstName поле и удалите атрибуты из элемента ввода.
Также не работает следующее:
// Uncaught TypeError: Cannot set property 'value' of undefined
document.regform.Submit.value = 'PayPal';
Однако, если это сработало, есть угловой случай, когда пользователь нажимает paypal кнопку, но форма не проверяется, пользователь затем исправляет ошибки проверки и отправляет форму с check кнопка. В этом случае форма будет отправлена с Submit=PayPal,
jQuery(function($) {
var form = $('#lx'), submit = $('input[name=Submit]', form);
form.validate({
rules: {
FirstName: {
required: true,
minlength: 2
}
}
});
// lets keep JavaScript out of the DOM
$('#bypaypal, #bycheck').on('click', function(event) {
var paymentType = event.target.id === 'bypaypal' ? 'PayPal' : '';
submit.val(paymentType);
form.submit();
});
// this is just for demo purposes, you don't need it
form.on('submit', function() {
if (form.valid()) {
alert('Form is valid: Submit="' + submit.val() + '"');
}
});
});<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.js"></script>
<form id="lx" class="form-horizontal" action="reg_process.php" method="post" name="regform">
<div class="row mbs">
<label class="control-label col-sm-4" for="firstname">
<span class="font-standout">*</span> First Name:
</label>
<div class="col-sm-8">
<input type="text" name="FirstName" class="form-control input-lg mrs mls" />
<input type="hidden" name="Submit" value="" />
</div>
</div>
<a href="javascript:void(0);" id="bypaypal" class="btn btn-primary">
<i class="fa fa-paypal"></i>
<br/>Pay with Paypal Online
</a>
<a href="javascript:void(0);" id="bycheck" class="btn btn-primary">
<i class="fa fa-check"></i>
<br/>Pay By Check
</a>
</form>Другие решения
Вероятно, то, что происходит, заключается в том, что inline-javascript использует код, и он никогда не дойдет до проверки jQuery. Так что убери это. Также стоит добавить идентификаторы в a отметьте кнопки отправки, чтобы легко захватить событие щелчка. Вам также нужно подавить действие по умолчанию a тег, поэтому используйте event.preventDefault (обратите внимание, что вы должны передать параметр события в .click функция)
(1) Удалить встроенный JavaScript.
(2) Присвойте идентификаторы вашим тегам привязки.
(3) Затем используйте jQuery для проверки события click.
HTML:
<form id="lx" class="form-horizontal" action="reg_process.php" method="post" name="regform">
<div class="row mbs">
<label class="control-label col-sm-4" for="firstname"><span class="font-standout">*</span> First Name:</label>
<div class="col-sm-8">
<input type="text" id="firstname" name="FirstName" class="form-control input-lg mrs mls" min="2" required />
</div>
</div>
<a id="paypal_submit" href="javascript:void(0)" class="btn btn-primary">
<i class="fa fa-paypal"></i><br/>
Pay with Paypal Online
</a>
<a id="normal_submit" href="javascript:void(0)" class="btn btn-primary">
<i class="fa fa-check"></i><br/>
Pay By Check
</a>
</form>
JQuery:
$('#paypal_submit, #normal_submit').click(function(e){
e.preventDefault; //stop a tag default action
var submit_type = this.id.split('_')[0]; //paypal or normal
var fn = $('#firstname').val();
if (fn=='' || fn.length < 4){
alert('Invalid first name');
$('#firstname').css({'background':'yellow','border':'1px solid orange'}).focus();
return false;
}else{
if (submit_type == 'paypal'){
$('#lx').val('PayPal').submit();
}else{
$('#lx').submit();
}
}
});
Если у вас есть несколько полей для проверки, вот еще одна демонстрация jsFiddle, которая показывает, как с этим справиться: