제출시 사용자에게 이메일을 보낼 양식을 만들려고합니다.
문제는 내가 Bootstrap의 양식 템플릿을 사용했으며 전화로 제출하고 잘못된 값을 우편으로 보내면 (전화 번호가 비어 있더라도) 이메일이 어쨌든 전송되고 (200 확인) 성공 경고가 표시됩니다.
내 HTML 코드는 다음과 같습니다.
<form class="needs-validation" novalidate id="paymentForm">
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName">First Name</label>
<input type="text" class="form-control" name="firstName" id="firstName" placeholder="" value="" required>
<div class="invalid-feedback">
required Feild
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastName">Lasr Name</label>
<input type="text" class="form-control" name="lastName" id="lastName" placeholder="" value="" required>
<div class="invalid-feedback">
required Feild
</div>
</div>
</div>
<div class="mb-3">
<label for="email">Email</label>
<input type="email" class="form-control" value="" name="email" id="email" placeholder="[email protected]" required>
<div class="invalid-feedback">
please enter a valid mail address
</div>
</div>
<div class="mb-3">
<label for="phone">Phone Number</label>
<input type="tel" class="form-control" value="" name="phone" placeholder="example: 050-1111111" pattern="[0]{1}[5]{1}[0-9]{8}" id="phone" required>
<div class="invalid-feedback">
please provide a valid phone number
</div>
</div>
<div class="mb-3">
<label for="address"> address</label>
<input type="text" class="form-control" name="address" id="address" placeholder="" required>
<div class="invalid-feedback">
please provide your address
</div>
</div>
<hr class="mb-4">
<h4 class="mb-3">payment method</h4>
<div class="d-block my-3">
<div class="custom-control custom-radio">
<input id="cash" value="cash" value="cash" name="paymentMethod" type="radio" class="custom-control-input" required checked>
<label class="custom-control-label" for="cash">cash</label>
</div>
<div class="custom-control custom-radio">
<input id="bit" value="bit" value="bit" name="paymentMethod" type="radio" class="custom-control-input" required>
<label class="custom-control-label" for="bit">Bit</label>
</div>
</div>
<div class="invalid-feedback">
please choose method
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">continue to checkout</button>
</form>
그리고 여기 내 js가 있습니다.
(function() {
'use strict'
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation')
Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
var radioValue = $('#paymentForm input:radio:checked').val()
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated')
var orderNumber = generateId();
var cName = $('#firstName').val() + " " + $('#lastName').val()
var cEmail = $('#email').val()
var cPhone = $('#phone').val()
var cAddress = $('#address').val()
var cSumToPay = parseInt(localStorage.getItem("totalPrice"));
var cProducts = JSON.parse(localStorage.getItem("products") || "[]");
cProducts = cProducts.map(Object.values);
cProducts = cProducts.join(' ');
console.log(cProducts);
var templateParams = {
order_number: orderNumber,
customer_name: cName,
products: cProducts,
addres: cAddress,
phone: cPhone,
customer: cEmail,
payment_Methode: radioValue,
customer_sum: cSumToPay
};
emailjs.send('gmail', 'orderconfirmation', templateParams)
.then(function(response) {
console.log('SUCCESS!', response.status, response.text);
alert('Yey! Your email was sent :)');
}, function(error) {
console.log('error');
alert(error);
});
event.preventDefault();
}, false)
})
}, false)
}())
도와 주시면 감사하겠습니다 !!!
이 섹션은 유효성 검사를위한 유일한 검사 인 것으로 보입니다.
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
그러나, event.preventDefault()및 event.stopPropagation()다음 섹션을 통해 떨어지는 코드를 방지하지 않을 수 있습니다. 이 시점에서 반품을 포함하면됩니다.
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
return false;
}
또는 else조건부 에서 나머지 코드를 래핑 할 수 있습니다.
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
} else {
// your email handling code
}
참고 : event.preventDefault()제출 버튼이 양식 제출의 기본 동작을 수행하는 것을 중지하고 event.stopPropagation()이벤트가 부모 요소 (필요하지 않을 수 있음)까지 버블 링되지 않도록하는 것이 유용합니다 . 참조 : https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault 및 https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
어쨌든 event.preventDefault()이벤트 리스너 맨 위에 단일 호출을 배치하면 두 번의 호출이 필요하지 않습니다.
form.addEventListener('submit', function(event) {
event.preventDefault();
...
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다