Ajax 제출 전 jQuery 양식 검증
JavaScript 비트:
$(document).ready(function()
{
$('#form').submit(function(e)
{
e.preventDefault();
var $form = $(this);
// check if the input is valid
if(! $form.valid()) return false;
$.ajax(
{
type:'POST',
url:'add.php',
data:$('#form').serialize(),
success:function(response)
{
$("#answers").html(response);
}
});
})
});
HTML 비트:
<input type="text" name="answer[1]" class="required" />
<input type="text" name="answer[2]" class="required" />
이것이 제가 사용하려는 코드입니다.Ajax에 양식을 보내기 전에 모든 입력 내용을 검증받자는 것입니다.저는 이것을 여러 번 시도해 보았지만 매번 서식이 완전히 채워지지 않았음에도 불구하고 제출하게 됩니다.모든 입력은 필수 클래스입니다.내가 뭘 잘못하고 있는지 누가 알겠니?
또, 입력명은 php로 생성되기 때문에, 클래스 베이스의 요건에 의존하고 있기 때문에, 어떤 이름이나 입력 타입을 얻을 수 있는지 알 수 없습니다.
저는 "페이지"에서 질문을 볼 때 질문을 표시하거나 숨깁니다.
<input type="button" id="next" onClick="toggleVisibility('form3')" class="next-btn"/>
JS:
function toggleVisibility(newSection)
{
$(".section").not("#" + newSection).hide();
$("#" + newSection).show();
}
옵션을 사용할 수 있습니다.기본적으로는$.ajax이 핸들러 내부에서 호출합니다.즉, 검증 설정 로직으로 반전합니다.
$('#form').validate({
... your validation rules come here,
submitHandler: function(form) {
$.ajax({
url: form.action,
type: form.method,
data: $(form).serialize(),
success: function(response) {
$('#answers').html(response);
}
});
}
});
그jQuery.validate검증이 통과하면 플러그인은 송신 핸들러를 호출합니다.
첫 번째로 추가는 필요 없습니다.classRules그 이후로는 분명히required는 jquery.displugin에 의해 자동으로 검출됩니다.다음 코드를 사용할 수 있습니다.
- 폼 송신에서는, 디폴트의 동작을 금지합니다.
- 형식이 Invalid인 경우 실행을 중지합니다.
- 그렇지 않으면 ajax 요청을 전송합니다.
$('#form').submit(function (e) {
e.preventDefault();
var $form = $(this);
// check if the input is valid using a 'valid' property
if (!$form.valid) return false;
$.ajax({
type: 'POST',
url: 'add.php',
data: $('#form').serialize(),
success: function (response) {
$('#answers').html(response);
},
});
});
다음을 시도해 볼 수 있습니다.
if($("#form").validate()) {
return true;
} else {
return false;
}
> Required JS for jquery form validation
> ## jquery-1.7.1.min.js ##
> ## jquery.validate.min.js ##
> ## jquery.form.js ##
$("form#data").validate({
rules: {
first: {
required: true,
},
middle: {
required: true,
},
image: {
required: true,
},
},
messages: {
first: {
required: "Please enter first",
},
middle: {
required: "Please enter middle",
},
image: {
required: "Please Select logo",
},
},
submitHandler: function(form) {
var formData = new FormData($("#image")[0]);
$(form).ajaxSubmit({
url:"action.php",
type:"post",
success: function(data,status){
alert(data);
}
});
}
});
다음 예에서는 입력만 확인하지만 수정할 수 있습니다. .ajax 함수에 다음과 같은 것을 추가합니다.
beforeSend: function() {
$empty = $('form#yourForm').find("input").filter(function() {
return this.value === "";
});
if($empty.length) {
alert('You must fill out all fields in order to submit a change');
return false;
}else{
return true;
};
},
jquery validation이 있는 submit Handler가 좋은 해결책이라고 생각합니다.이 코드에서 아이디어를 얻으세요.@Darin Dimitrov에서 영감을 얻음
$('.calculate').validate({
submitHandler: function(form) {
$.ajax({
url: 'response.php',
type: 'POST',
data: $(form).serialize(),
success: function(response) {
$('#'+form.id+' .ht-response-data').html(response);
}
});
}
});
저는 먼저 폼을 검증하고 검증이 통과되면 ajax 포스트를 만들 것이라고 생각합니다.스크립트 끝에 "return false"를 추가하는 것을 잊지 마십시오.
function validateForm()
{
var a=document.forms["Form"]["firstname"].value;
var b=document.forms["Form"]["midname"].value;
var c=document.forms["Form"]["lastname"].value;
var d=document.forms["Form"]["tribe"].value;
if (a==null || a=="",b==null || b=="",c==null || c=="",d==null || d=="")
{
alert("Please Fill All Required Field");
return false;
}
else{
$.ajax({
type: 'post',
url: 'add.php',
data: $('form').serialize(),
success: function () {
alert('Patient added');
document.getElementById("form").reset();
}
});
}
}
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
validateForm();
});
});
폼 검증이 유효한지 확인하기 전에 폼 검증을 트리거해야 합니다.필드 검증은 각 필드에 데이터를 입력한 후 실행됩니다.양식 검증은 제출 이벤트에 의해 트리거되지만 문서 수준에서 트리거됩니다.따라서 jquery가 전체 폼을 검증하기 전에 이벤트 핸들러가 트리거됩니다.하지만 걱정하지 마세요. 이 모든 것에 대한 간단한 해결책이 있습니다.
다음 폼의 유효성을 확인해야 합니다.
if ($(this).validate().form()) {
// do ajax stuff
}
https://jqueryvalidation.org/Validator.form/ #validator-form()
$("#myformId").submit(function (event) {
// submit modal form of create & edit
event.preventDefault();
formObj = $(this);
// check the form input is valid or not if not valid then return false;
if (!formObj.validate().form()) return false;
data = $(formObj).serializeArray();
// do stuff with ajax or anything else what you wants
});
설명: - 먼저 형식을 검증하고 검증에 합격하면 Ajax 요청을 호출합니다.그렇지 않으면 return false를 사용하여 실행을 중지합니다.
var validator = $( "#myform" ).validate();폼의 유효성을 확인하고 유효하면 true를 반환하고 그렇지 않으면 false를 반환합니다.그냥 요.if (!formObj.validate().form())
검증 기능의 커스터마이즈 옵션을 공유합니다.
$(function () {
$('form.needs-validation').each(function() { // <- selects every <form> on page which contains .needs-validation class
var validator = $(this).validate({
errorElement: 'span',
errorPlacement: function (error, element) {
error.addClass('invalid-feedback');
element.closest('.form-group').append(error);
},
highlight: function (element, errorClass, validClass) {
$(element).addClass('is-invalid');
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass('is-invalid');
}
});
});
});
JQuery 검증을 맞춤화하는 방법에 대한 자세한 내용은 여기를 참조하십시오.
기본 확인 메시지 사용자 지정에 대해서는 아래 답변 URL을 참조하십시오.
HTML 폼:
<div class="w3-padding w3-flat-clouds">
<p><label>Your Name:</label><input id = 'name' class="w3-input w3-border" type="text" name = 'enter-name' placeholder = "Enter your Name" required></p>
<p><label>Your Email:</label><input id = 'e-mail' class="w3-input w3-border" type="text" name = 'enter-email' placeholder = "Enter your email" required></p>
<p><label>Your Message:</label><textarea id = 'message' style = 'height: 80px;' class="w3-input w3-border" name = 'enter-message' placeholder = "Enter your message..." required></textarea></p>
<button class = 'w3-button w3-btn w3-black w3-hover-green' id = 'sub-btn'>submit</button>
</div>
AJAX:
$(document).ready(() => {
$('#sub-btn').click(() => {
var nameInsert = document.getElementById('name').value;
var emailInsert = document.getElementById('e-mail').value;
var messageInsert = document.getElementById('message').value;
var atTheRate = emailInsert.indexOf("@");
var dotPosition = emailInsert.lastIndexOf(".");
if(atTheRate < 1 || dotPosition < 6)
{
alert(nameInsert + ' Please Provide Your Proper Email!');
return false; //Prevents your form to being submit.
}
else
{
$.ajax({
url: '/send-details',
method: 'GET',
data: {
nameInsert: nameInsert,
emailInsert: emailInsert,
messageInsert: messageInsert
},
success: (successObj) => {
var successResult = JSON.parse(successObj);
if(successResult)
{
console.log(successResult);
alert('Thank You ' + nameInsert + '! Your Message Received Successfully!');
}
else
{
console.log('Message Insertion failed!');
alert('Message Insertion failed!');
}
}
});
return true; //Allows you to submit.
}
});
});
JavaScript를 형성합니다.checkValidity는 " " "를 합니다.HTML5 검사
$(document).ready(function() {
$('#urlSubmit').click(function() {
if($('#urlForm')[0].checkValidity()) {
alert("form submitting");
}
});
});
언급URL : https://stackoverflow.com/questions/11469616/jquery-form-validation-before-ajax-submit
'programing' 카테고리의 다른 글
| JSON 데이터를 javascript에 구문 분석 없이 동기적으로 포함하려면 어떻게 해야 합니까? (0) | 2023.03.17 |
|---|---|
| ReactJs, 같은 파라미터로 setState를 호출한다. (0) | 2023.03.17 |
| 오류: 연결을 업그레이드할 수 없음: 컨테이너를 찾을 수 없음("wordpress") (0) | 2023.03.17 |
| Redux-Form 필드 값을 프로그래밍 방식으로 변경합니다. (0) | 2023.03.12 |
| sudo gem install json을 시도하면 다음 오류가 나타납니다. (0) | 2023.03.12 |