Validate a form at the client side

Question

I wish to validate a form at the client side (before submit to server). I have a script to search for special characters (~!@#) etc. If at least one exists, form should not be submitted until the user corrects the error(s). Here is my form:

<form  id="setUp" method="post" action="Usercontact.php">
<table id="contact">
<tbody>
<tr>
<th class="cdtl">Name of user:</td>
<td><input type="text" name='username' required /></td>
</tr>
<tr>
<th class="cdtl">Course</td>
<td><input type="text" name='useraddy1' required  /></td>
</tr>
<tr>
<th class="cdtl">Telephone</td>
<td><input type="text" name='userfone' required  /></td>
</tr>
<tr>
<th class="cdtl">e-mail Address</td>
<td><input type="email" name='schemail' required  /></td>
</tr>
</tbody>
</table>
<br>
<input id="postform" type="submit" onclick="err()" value="Submit form">
</form>

Below is the script

<script>
function err() {
    var tbl = document.getElementById("contact");
    var name = tbl.rows[0].cells[1].getElementsByTagName("input")[0].value;
    var addy = tbl.rows[1].cells[1].getElementsByTagName("input")[0].value;
    var fone = tbl.rows[2].cells[1].getElementsByTagName("input")[0].value;
    var email = tbl.rows[3].cells[1].getElementsByTagName("input")[0].value;

    var namepos = name.lastIndexOf("~`!@#$%^&*)(+=}{][|\:;'.'/"',>?<");
    var addypos = addy.lastIndexOf("~`!@#$%^&*)(+=}{][|\:;'.'/"',>?<");
    var fonepos = fone.lastIndexOf("~`!@#$%^&*)(+=}{][|\:;'.'/"',>?<");
    var emailpos = name.lastIndexOf("~`!@#$%^&*)(+=}{][|\:;'.'/"',>?<");

    if (namepos !== -1 || addypos !== -1 || fonepos !== -1 || emailpos !== 
    -1) {
        document.getElementById("postform").addEventListener("click",  
        function(event){
        event.preventDefault()
        });
    }
}
</script>

Please why is this script not working. The form is submitted even when there are special characters in any of the input fields. Appreciate

Answer 1

This line:

var namepos = name.lastIndexOf("~`!@#$%^&*)(+=}{][|\:;'.'/"',>?<");

is checking for the entire string ("~`!@#$%^&*)(+=}{][|:;'.'/"',>?<"), not each character.

As suggested in the comments, you could use the HTML5 pattern attribute:

<input name="name" pattern="[A-Za-z]{3,12}">

This would require the name to include only letters and range in length from 3 to 12 characters.

To use a regular expression to test for all the characters you listed, you could use:

var re=/[~`!@#$%^&*)(+=}{\]\[|\:;'.'\"',>?<]/
var str="this@that";

if (re.test(str)) {
    console.log('The string has one of the characters');
} else {
    console.log('The string does not have any of the characters');
}

Answer 2

You need to include event. PreventDefault().. This will prevent the form from submitting if you find characters you are checking for or anything else you might be checking for.

Answer 3

Following suggestions above, I have now a working doc as follows:

<form  id="setUp" method="post" action="Usercontact.php">
<table id="contact">
<tbody>
<tr>
<th class="cdtl">Name of user:</td>
<td><input type="text" name='username' required pattern="[A-Za-z0-9.-_]
{5,12}"/></td>
</tr>
<tr>
<th class="cdtl">Course</td>
<td><input type="text" name='useraddy1' required pattern="[A-Za-z0-9]{5,15}" 
/></td>
</tr>
<tr>
<th class="cdtl">Telephone</td>
<td><input type="text" name='userfone' required pattern="[0-9.-_]{6,15}" />     
</td>
</tr>
<tr>
<th class="cdtl">e-mail Address</td>
<td><input type="email" name='schemail' required pattern="[A-Za-z0-9.-_@]" 
/></td>
</tr>
</tbody>
</table>
<br>
<input id='submit' type="submit" value="Submit form">
</form>

The script was removed as there is no need for it.