CODEWITHSUNDEEP
javascript
Olu Adabonyan
Olu Adabonyan

Reputation: 93

Validate a form at the client side

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

Upvotes: 0

Views: 70

Answers (3)

Olu Adabonyan
Olu Adabonyan

Reputation: 93

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.

Upvotes: 0

viejoEngineer
viejoEngineer

Reputation: 404

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.

Upvotes: 0

user2182349
user2182349

Reputation: 9782

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');
}

Upvotes: 2

Related Questions