** 추가 코드로 업데이트 됨 **
나는 누군가를 위해 사이트를 재 설계하고 이전 개발자의 PHP 코드 중 일부를 재사용하고 있습니다. 양식은 프로세스 페이지에서 서버 측을 제출하고 유효성 검사를 수행합니다. 이것은 사용자 경험 관점에서 분명히 나쁘다. jquery 유효성 검사를 통합하려고합니다. 나는 디자이너에 가깝고 PHP와 중간 정도의 jquery에 대한 지식이 제한적입니다.
끝에 2 개의 제출 옵션이있는 매우 간단한 형식입니다. 수표로 결제하기위한 1 개 버튼, 페이팔 용 1 개.
이 버튼에 사용되는 코드는 내 jquery 양식 유효성 검사를 완전히 우회합니다. 간단한 제출 버튼을 넣으면 jquery 유효성 검사가 시작됩니다.
사용중인 2 개의 버튼에 대한 코드입니다.
<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>
버튼은 단순히 페이팔 또는 널을 양식 제출 프로세스 페이지로 전달한 다음 그 후에 리디렉션합니다. 이 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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다