e.preventDefault()를 호출한 후 양식 제출
저는 여기서 간단한 양식 검증을 하고 있는데 아주 기본적인 문제로 막혔습니다.이름과 엔트리(저녁식사 등록용) 필드 쌍이 5개 있습니다.사용자는 1-5쌍을 입력할 수 있지만 이름이 있는 경우 항목을 선택해야 합니다.코드:
<form>
Name: <input name="atendeename[]">
Entree: <input name="entree[]"><br>
Name: <input name="atendeename[]">
Entree: <input name="entree[]"><br>
Name: <input name="atendeename[]">
Entree: <input name="entree[]"><br>
Name: <input name="atendeename[]">
Entree: <input name="entree[]"><br>
Name: <input name="atendeename[]">
Entree: <input name="entree[]"><br>
<input type="submit" value="Submit">
</form>
// Prevent form submit if any entrees are missing
$('form').submit(function(e){
e.preventDefault();
// Cycle through each Attendee Name
$('[name="atendeename[]"]', this).each(function(index, el){
// If there is a value
if ($(el).val()) {
// Find adjacent entree input
var entree = $(el).next('input');
// If entree is empty, don't submit form
if ( ! entree.val()) {
alert('Please select an entree');
entree.focus();
return false;
}
}
});
$('form').unbind('submit').submit();
});
오류 메시지가 작동 중인데 매번 양식을 제출하고 있습니다.이 대사에 뭔가 문제가 있다는 걸 압니다
$('form').unbind('submit').submit();
...하지만 제가 뭘 해야할지 모르겠어요.
가장 간단한 해결책은 전화하지 않는 것입니다.e.preventDefault()유효성 확인이 실제로 실패하지 않는 한.그 선을 안쪽으로 이동합니다.if합니다..unbind().submit().
사실 이것이 올바른 방법인 것 같습니다.
$('form').submit(function(e){
//prevent default
e.preventDefault();
//do something here
//continue submitting
e.currentTarget.submit();
});
element.submit()은 각 핸들러 에서 preventDefault다에서
$('form').submit(function(e){
e.preventDefault();
var valid = true;
$('[name="atendeename[]"]', this).each(function(index, el){
if ( $(el).val() ) {
var entree = $(el).next('input');
if ( ! entree.val()) {
entree.focus();
valid = false;
}
}
});
if (valid) this.submit();
});
는, ,return false는을 미칩니다..each() method ...에 그래서 오류가 있어도 선에 도달합니다.
$('form').unbind('submit').submit();
양식을 제출합니다.
변수를 validated를 들어 true 로합니다를 합니다.럼,에서,에 return false,validated = false.
드디어...
if (validated) $('form').unbind('submit').submit();
이렇게 하면 오류가 없는 경우에만 양식을 제출할 수 있습니다.
$('form').submit(function(e){
var submitAllow = true;
// Cycle through each Attendee Name
$('[name="atendeename[]"]', this).each(function(index, el){
// If there is a value
if ($(el).val()) {
// Find adjacent entree input
var entree = $(el).next('input');
// If entree is empty, don't submit form
if ( ! entree.val()) {
alert('Please select an entree');
entree.focus();
submitAllow = false;
return false;
}
}
});
return submitAllow;
});
$(document).ready(function(){
$('#myform').on('submit',function(event){
// block form submit event
event.preventDefault();
// Do some stuff here
...
// Continue the form submit
event.currentTarget.submit();
});
});
늦어서 미안하지만 완벽한 폼을 만들도록 노력하겠습니다 :)
하고 Count validation step 입니다가 하겠습니다..val(). ..length엔 더 요,합니다는 합니다.unbind기능.
물론 소스 코드:
// Prevent form submit if any entrees are missing
$('form').submit(function(e){
e.preventDefault();
var formIsValid = true;
// Count validation steps
var validationLoop = 0;
// Cycle through each Attendee Name
$('[name="atendeename[]"]', this).each(function(index, el){
// If there is a value
if ($(el).val().length > 0) {
validationLoop++;
// Find adjacent entree input
var entree = $(el).next('input');
var entreeValue = entree.val();
// If entree is empty, don't submit form
if (entreeValue.length === 0) {
alert('Please select an entree');
entree.focus();
formIsValid = false;
return false;
}
}
});
if (formIsValid && validationLoop > 0) {
alert("Correct Form");
return true;
} else {
return false;
}
});
같은 확률을 발견했지만 포럼 등에서 그것에 대한 직접적인 해결책을 찾지 못했습니다.마지막으로 '제출' 이벤트 형식에 대해 이벤트 핸들러 함수 내부에 다음 논리를 구현하기만 하면 다음과 같은 솔루션이 완벽하게 작동했습니다.
document.getElementById('myForm').addEventListener('submit', handlerToTheSubmitEvent);
function handlerToTheSubmitEvent(e){
//DO NOT use e.preventDefault();
/*
your form validation logic goes here
*/
if(allInputsValidatedSuccessfully()){
return true;
}
else{
return false;
}
}
심플 AS THAT; 참고: 양식 'submit' 이벤트의 처리기에서 'false'가 반환되면, 해당 양식은 html 마크업의 액션 속성에 지정된 URI에 제출되지 않으며, 처리기에서 'true'가 반환될 때까지 또는 반환되지 않는 한, 모든 입력 필드의 유효성이 확인되는 즉시 이벤트 처리기에서 'true'가 반환됩니다.그리고 당신의 양식이 제출될 겁니다.
또한 참고: if() 조건 내부의 함수 호출은 기본적으로 모든 필드가 유효한지 확인하고 결과적으로 'true'를 반환해야 하며, 그렇지 않으면 'false'를 반환해야 합니다.
저의 경우는 레이스가 있었는데, 숨겨진 필드를 채우고 양식을 작성한 후 보내려면 아약스 응답이 필요했기 때문입니다.e.preventDefault()를 조건으로 설정하여 수정했습니다.
var all_is_done=false;
$("form").submit(function(e){
if(all_is_done==false){
e.preventDefault();
do_the_stuff();
}
});
function do_the_stuf(){
//do stuff
all_is_done=true;
$("form").submit();
}
양식 자체보다 제출 버튼 이벤트를 바인딩하는 것은 어떨까요?만약 당신이 사용하지 않는 한 양식 자체가 제출할 것이기 때문에 당신이 버튼을 묶는다면 그것은 정말로 훨씬 쉽고 안전할 것입니다.preventDefault()
$("#btn-submit").on("click", function (e) {
var submitAllow = true;
$('[name="atendeename[]"]', this).each(function(index, el){
// If there is a value
if ($(el).val()) {
// Find adjacent entree input
var entree = $(el).next('input');
// If entree is empty, don't submit form
if ( ! entree.val()) {
alert('Please select an entree');
entree.focus();
submitAllow = false;
return false;
}
}
});
if (submitAllow) {
$("#form-attendee").submit();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form-attendee">
Name: <input name="atendeename[]">
Entree: <input name="entree[]"><br>
Name: <input name="atendeename[]">
Entree: <input name="entree[]"><br>
Name: <input name="atendeename[]">
Entree: <input name="entree[]"><br>
Name: <input name="atendeename[]">
Entree: <input name="entree[]"><br>
Name: <input name="atendeename[]">
Entree: <input name="entree[]"><br>
<button type="button" id="btn-submit">Submit<button>
</form>버튼에 바인딩하면 버튼을 누르는 것 외에 제출하는 경우 해결되지 않습니다(예: Enter 키 누르기).
언급URL : https://stackoverflow.com/questions/22363838/submit-form-after-calling-e-preventdefault
'programing' 카테고리의 다른 글
| XmlDocument를 사용하여 XML 문서를 만드는 방법은 무엇입니까? (0) | 2023.10.13 |
|---|---|
| 포스트 컨텐츠에서 WordPress 숏코드 속성을 추출하는 방법 (0) | 2023.10.13 |
| 아이폰 시뮬레이터 리셋 방법 (0) | 2023.10.13 |
| 스레드에 바인딩된 최대 절전 모드 세션이 없으며 구성에서는 여기서 트랜잭션이 아닌 세션을 생성할 수 없습니다. (0) | 2023.10.08 |
| 함수에 필수 매개 변수에 null 전달 (0) | 2023.10.08 |