Я написал простую регистрационную форму с атрибутом действия на HTML, которая, когда пользователь заполняет входные данные он отправляет их в мою базу данных. Все работает нормально, пока я не добавил скрипт проверки с использованием Javascript. Сценарий отлично работает с моими параметрами, но когда я нажимаю кнопку отправки, форма не выполняет атрибут действия. Один из способов, который я придумал, — сделать более простой скрипт внутри моего HTML, но я бы предпочел сохранить его в отдельном файле.
HTML:
<script defer src = "validation.js">
.......
<form action = "register_user.php" method = "post" id = "formRegister" name = "formRegister" >
<div class = "formfield">
<table style = "display: inline-table; margin: 0px 12px 0px 12px;" >
<tr>
<td> Name<b style = "color:red;">*</b> </td>
<td>
<div class = "input-control">
<input type = "text" name = "name" size = "32" id = "name" >
<div class = "error"></div>
</div>
</td>
</tr>
<tr>
<td> Surename<b style = "color:red;">*</b> </td>
<td>
<div class = "input-control">
<input type = "text" name = "surename" size = "32" id = "surename" >
<div class = "error"></div>
</div>
</td>
</tr>
<tr>
<td> AMKA<b style = "color:red;">*</b> </td>
<td>
<div class = "input-control">
<input type = "text" name = "amka" size = "32" id = "amka" >
<div class = "error"></div>
</div>
</td>
</tr>
<tr>
<td> AFM<b style = "color:red;">*</b> </td>
<td>
<div class = "input-control">
<input type = "text" name = "afm" size = "32" id = "afm" >
<div class = "error"></div>
</div>
</td>
</tr>
<tr>
<td> PID<b style = "color:red;">*</b> </td>
<td>
<div class = "input-control">
<input type = "text" name = "pid" size = "32" id = "pid">
<div class = "error"></div>
</div>
</td>
</tr>
<tr>
<td> Age<b style = "color:red;">*</b> </td>
<td>
<div class = "input-control">
<input type = "text" name = "age" size = "32" id = "age">
<div class = "error"></div>
</div>
</td>
</tr>
<tr>
<td> Gender </td>
<td>
<div class = "input-control">
<input type = "text" name = "gender" size = "32">
<div class = "error"></div>
</div>
</td>
</tr>
<tr>
<td> Email </td>
<td>
<div class = "input-control">
<input type = "text" name = "email" size = "32" id = "email">
<div class = "error"></div>
</div>
</td>
</tr>
<tr>
<td> Mobile Phone<b style = "color:red;">*</b> </td>
<td>
<div class = "input-control">
<input type = "text" name = "mphone" size = "32" id = "mphone">
<div class = "error"></div>
</div>
</td>
</tr>
<tr>
<td> Role<b style = "color:red;">*</b> </td>
<td>
<div class = "dropdown">
<div class = "input-control">
<select id = "dropdown" name = "dropdown">
<option value= "">Select...</option>
<option value = "1">Civilian</option>
<option value = "2">Doc</option>
</select>
<div class = "error"></div>
</div>
</div>
</td>
</tr>
</table>
<br><br>
<button type = "submit" name = "register" > Register </button>
</div>
</form>
Javascript (валидация.js):
const formRegister = document.getElementById('formRegister');
const nameid = document.getElementById('name');
const surename = document.getElementById('surename');
const amka = document.getElementById('amka');
const afm = document.getElementById('afm');
const pid = document.getElementById('pid');
const age = document.getElementById('age');
const mphone = document.getElementById('mphone');
const dropdown = document.getElementById('dropdown');
const email = document.getElementById('email');
formRegister.addEventListener('submit', e => {
e.preventDefault();
validateInputs();
});
const setError = (element, message) => {
const inputControl = element.parentElement;
const errorDisplay = inputControl.querySelector('.error');
errorDisplay.innerText = message;
inputControl.classList.add('error');
inputControl.classList.remove('success')
}
const setSuccess = element => {
const inputControl = element.parentElement;
const errorDisplay = inputControl.querySelector('.error');
errorDisplay.innerText = '';
inputControl.classList.add('success');
inputControl.classList.remove('error');
};
const isValidEmail = email => {
const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
const validateInputs = () => {
const nameidValue = nameid.value.trim();
const surenameValue = surename.value.trim();
const amkaValue = amka.value.trim();
const afmValue = afm.value.trim();
const pidValue = pid.value.trim();
const ageValue = age.value.trim();
const mphoneValue = mphone.value.trim();
const dropdownValue = dropdown.value;
const emailValue = email.value.trim();
var letters = /^[A-Za-z]+$/;
var symbols = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>/?]+/;
var numbers = /^[0-9]+$/;
//error check
//name
if (nameidValue === ''){
setError(nameid, 'Error');
}else if (nameidValue.match(letters)){
setSuccess(nameid);
}else{
setError(nameid, 'Error');
}
//surename
if (surenameValue === '' ){
setError(surename, 'Error');
}else if (surenameValue.match(letters)){
setSuccess(surename);
}else{
setError(surename, 'Error');
}
//amka
if (amkaValue === ''){
setError(amka, 'Error');
}else if (amkaValue.length != 11){
setError(amka,'Error');
}else{
setSuccess(amka);
}
//afm
if (afmValue === ''){
setError(afm, 'Error');
}else if (afmValue.length != 9){
setError(afm,'Error');
}else {
setSuccess(afm);
}
//pid
if (pidValue === ''){
setError(pid,'Error');
}else if (pidValue.length != 8){
setError(pid, 'Error');
}else{
setSuccess(pid);
}
//age
if (ageValue === ''){
setError(age, 'Error');
}else {
setSuccess(age);
}
//mphone
if (mphoneValue === ''){
setError(mphone,'Error');
}else if (mphoneValue.length != 10){
setError(mphone, 'Error')
}else {
setSuccess(mphone);
}
//dropdown
if (dropdownValue == ""){
setError(dropdown, 'Error');
}else{
setSuccess(dropdown);
}
};
Входные теги больше не требуют закрытия /
.
Ок, только что погуглил. Не знал, что мой линтер показывает ошибки, если они не закрыты. Но, кажется, их нужно закрывать только при использовании XHTML.
Он не отправит форму из-за этой строки:
e.preventDefault();
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
Я предлагаю вам повторно отправить форму после того, как ваша логика проверки будет запущена, если форма действительна.
Спасибо, это действительно сработало. Я постараюсь найти другой способ, чтобы моя форма не отправлялась, пока все поля пусты!
Если вы добавите идентификатор к своей кнопке, вы можете вручную вызвать кнопку для отправки после запуска проверки.
Вы запрещаете действие браузера по умолчанию для отправки почтового запроса на указанный маршрут. Попробуйте удалить "e.preventDefault" из script.js. Это должно отправить данные на маршрут
Да, я постараюсь как-нибудь обойти это. Но именно это удерживает его от использования атрибута действия.
Вам не хватает некоторых
/
, чтобы закрыть теги<input>
.