表单验证执行不正确

Question

My script disables the submit button for a form if the text-input is empty. I wrote a separate script that prompts a confirmation window before the user is allowed to submit updated content into the database. Both scripts work fine individually.

My problem arises when I try to combine both scripts using an if/else statement. The code below disables the button as expected and inserts the user-inputted data into the database once the submit button is enabled, however the confirmation window is entirely bypassed.

How can I get the confirmation window to appear again before anything is submitted?

JavaScript:

<script>   

function validationCheck() {
    if(document.getElementById('updateEventTitle').value==='') { 
        document.getElementById('updateBtn').disabled = true; 
    } else { 
        document.getElementById('updateBtn').disabled = false;

        //Confirmation window
       function updateEvent() {

            var r =confirm('Do you want to update this item?');
            if (r==true)    {
                window.location.href = 'server.php';
            } else {
                event.preventDefault();
            }
        }  
    }
}

</script>

HTML:

<form action='editevent.php?updaterow=$iddata' method='POST' id='updateEventTitle'>

  <input type='text' id='updateEventTitle' name='myUpdateEventTitle' size='30' maxlength='40' placeholder='$row[eventName]' onkeyup='validationCheck()' required/>

  <input class='btn btn-primary btn-sm' onclick='updateEvent()' type='submit' name='updateEventTitle' value='Update' id='updateBtn' disabled/> 

</form>

Answer 1

You make reference to event in your two functions, but neither of them declared the event function argument. You need to set up the event argument in your functions:

 function validationCheck(event)
 function updateEvent(event)....

And, just nesting a function inside of another doesn't make the second one run. Instead, reorganize things a bit and don't set up your events with inline HTML event attributes , like onclick in the first place. Do your JavaScript work separate from your HTML.

Also, with a form, it's not the click event of the submit button that you should be handling, it's the submit event of the form .

Also (FYI), don't bother with self-terminating HTML tags .

Lastly, you've got your form action set to: editevent.php?updaterow=$iddata but later, if the user confirms that they want to submit, you are redirecting to: server.php . While that redirect will now work, the data that was inputted into the form will not be sent to it. Instead, with form validation, you simply test for situations where the submit should be halted and if that scenario doesn't exist, you simply do nothing and let the form submit as it was going to.

 // Set up your event handlers in JavaScript, not with inline HTML document.querySelector("form").addEventListener("submit", validationCheck); document.getElementById("updateEventTitle").addEventListener("keyup", validationCheck); // Get your DOM references just once, not every time the function runs let eventTitle = document.getElementById('updateEventTitle'); let btnUpdate = document.getElementById('updateBtn'); function validationCheck(event) { if(eventTitle.value==='') { btnUpdate.disabled = true; } else { btnUpdate.disabled = false; // If it was the submit button that was pressed... if(event.type === "submit"){ // Confirmation window // You only need to test for and handle situations where the form // submit event should be halted. Otherwise, let the form submit to its action URL if (!confirm('Do you want to update this item?') { event.preventDefault(); } } } }

 <form action='editevent.php?updaterow=$iddata' method='POST' id='updateEventTitle'> <input type='text' id='updateEventTitle' name='myUpdateEventTitle' size='30' maxlength='40' placeholder='$row[eventName]' required> <input class='btn btn-primary btn-sm' type='submit' name='updateEventTitle' value='Update' id='updateBtn' disabled> </form>

Answer 2

Is there a way to use @Scott Marcus method for multiple seperate forms on the same page, for example if I had a second additional form such as below? Javascript only seems to allow you to pass one param at a time using .getElementById

<form action='editevent.php?updaterow=$iddata' method='POST'     id='updateEventDate'>
<input type='text' id='updateEventDate' name='myUpdateEventDate' size='15' maxlength='10' placeholder=$eventDate required/> 
<input class='btn btn-primary btn-sm' type='submit' name='updateEventDate' value='Update' id='updateBtn' disabled> 
</form>