表单onsubmit不执行功能

Question

I've created this simple form setup, where I want a validator to check a field before accepting the form. But whether I use buttons or input, I can't seem to make it call my validateForm() function. At one point I got it working, but after uploading it to my server, then pulling it using git, it completely stopped calling the function again.

I am severely confused, as to my eyes, this should work. Are there any alternatives, solutions or workaround for this issue?

 function validateForm(e) { if (document.reg_form.reg_code.value == "unique code value") { return true; } swal({ type: 'error', title: 'Du har ikke indtastet en gyldig registreringskode.', showCancelButton: false, confirmButtonText: 'OK', confirmButtonColor: '#00a651', }); e.preventDefault(); return false; } 

 <form action="<?= get_home_url(); ?>/create-profile/" method="post" onsubmit="validateForm(event)" name="reg_form" id="reg_form" class="form"> <div class="form__field"> <label for="" class="form__label">Registreringskode</label> <input type="text" class="form__input" required placeholder="Indtast din tilsendte kode" name="user[reg_code]" id="registration" /> <p class="hidden" id="code_warning">Den indsatte kampagnekode findes ikke!</p> </div> <input type="submit" value="Opret bruger" form="reg_form" class="btn btn--green btn--large btn--block"> </form> 

Answer 1

Seems like you are not returning anything onsubmit .

It should be onsubmit="return validateForm(event)"

Try

<form action="<?= get_home_url(); ?>/create-profile/" method="post" onsubmit="return validateForm(event)" name="reg_form" id="reg_form" class="form">

...
</form>

Update: I just noticed you are accessing the form input wrong and is throwing an error in the console.

function validateForm(e) {
  if (document.reg_form['user[reg_code]'].value == "unique code value") {
}

A better approach would be to access the input directly using its id.

 function validateForm(e) { if (document.getElementById('registration').value == "unique code value") { return true; } alert("Validation failed"); e.preventDefault(); return false; } 

 <form action="" method="post" onsubmit="return validateForm(event)" name="reg_form" id="reg_form" class="form"> <div class="form__field"> <label for="" class="form__label">Registreringskode</label> <input type="text" class="form__input" required placeholder="Indtast din tilsendte kode" name="user[reg_code]" id="registration" /> <p class="hidden" id="code_warning">Den indsatte kampagnekode findes ikke!</p> </div> <input type="submit" value="Opret bruger" form="reg_form" class="btn btn--green btn--large btn--block"> </form> 

Answer 2

Robin C Samuel is right, only suspicious thing on that code is missing return. However, as you talk about uploading to server and checking out ... are you sure you didn't forgot to add some file into git? Either the file with the validateForm may be missing, or the file with the swal function (if there is error in submit handler, like missing function, javascript will fail and browser will then submit the form.)

... wait. One more thing. Try

swal({
    type: 'error',
    title: 'Du har ikke indtastet en gyldig registreringskode.',
    showCancelButton: false,
    confirmButtonText: 'OK',
    confirmButtonColor: '#00a651'
  });

• note the missing comma after last field.