I wrote a simple register form with an action attribute on HTML that when the user fills the inputs it sends them to my database. Everything works fine until I added a validation script using Javascript. The script works fine with my parameters but when I press the submit button the form doesnt execute the action attribute. One way I thought around this is make a simpler script inside my HTML but I'd prefer to keep it on a separate file.
HTML:
<script defer src = "validation.js">
.......
<form action="register_user.php" method="post" id="formRegister" name = "formRegister" >
<div >
<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 ></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 ></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 ></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 ></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 ></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 ></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 ></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 ></div>
</div>
</td>
</tr>
<tr>
<td> Role<b style="color:red;">*</b> </td>
<td>
<div >
<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 ></div>
</div>
</div>
</td>
</tr>
</table>
<br><br>
<button type="submit" name="register" > Register </button>
</div>
</form>
Javascript (validation.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);
}
};
CodePudding user response：
It won't submit the form due to this line:
e.preventDefault();
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
My suggestion is you resubmit the form after your validation logic has run providing the form is valid.
CodePudding user response：
You're preventing the default action of the browser to submit the post request to the given route. Try removing the "e.preventDefault" from the script.js. That should send the data to the route