表单提交javascript html中的触发动作

Question

I am trying to validate the fields in the form and pull up a different html file when the user clicks the submit button if there's no error in field validation.

1. However, the validators don't seem to work. I want the Event Name and Location fields to alphanumeric characters and spaces, but it seems to take other values as well.
2. Putting onClick="self.location='successPage.html'" inside the submit button does not seem to validate the fields either. I want it to move to the successPage.html file if all fields in the form are successfully validated.

I don't want to use jQuery.

Here is my code:

 <form action="" > <p> <label> Day of the week:<br> <select name="days"> <option value="mon">Monday</option> <option value="tue">Tuesday</option> <option value="wed">Wednesday</option> <option value="thu">Thursday</option> <option value="fri">Friday</option> </select><br> </label> <label> Start Time:<br> <input id="appt1" type="time" name="appt1" min="9:00" max="18:00" required /><br> </label> <label> End Time:<br> <input id="appt2" type="time" name="appt2" min="9:00" max="18:00" required /><br> </label> <label> Event Name:<br> <input id="ename" type="text" name="ename" required /><br> </label> <label> Location:<br> <input id="loc" type="text" name="location" required /><br><!--pattern="[A-Za-z0-9\\s]"--> </label> <label> Enter URL for the pictture:<br> <input id="urlpic" type="text" name="urlname" /> </label> <br><br> <input type="reset" id="reset" value="Reset" /> <input type="submit" id="submit" value="Submit" /><!--onClick="self.location='successPage.html'"--> <!-- <input type=button value="Submit" onClick="self.location='successPage.html'"> --> </p> </form> <script> function chkName() { var myName = documnet.getElementById("ename"); var pos = myName.value.search( /^[A-Za-z0-9\\s]/); if (pos != 0) { alert("Please check your input (" + myName + ") again"); return false; } else return true; } function chkLoc() { var myLoc = documnet.getElementById("loc"); var pos = myLoc.value.search( /^[A-Za-z0-9\\s]/); if (pos != 0) { alert("Please check your input (" + myLoc + ") again"); return false; } else return true; } document.getElementById("ename").onchange = chkName; document.getElementById("loc").onchange = chkLoc; </script>

Answer 1

<form action="." method="POST" onsubmit="return validate(this)">
    <input type="submit" value="Submit">
</form>

the form element will be passed into the validate function when the user submits, return false to not submit the form, and true to submit it.

<script>
    function validate(form) {
        console.log(form); // log element to console on submit
        return false; // replace with true if input is good to be submitted
    }
</script>