Menu
Junior Dev here. I'm trying to implement the following code in order to get all the info typed in the form and to receive an alert message ("everything is ok").
I know there is Jquery valid() function, but I have struggle with implementing it as well.So if it's possible when the textbox doesn't meet the requirements to post the error message(email needs "@", website needs "www.", name 6 letters, password="****".
Can anyone explain me with simple code how can I achieve this ?
<form id=registration_form action="" method="post">
<table>
<tr>
<td>Chose Username: </td>
<td>
<input type="text" class="form_text" id="form_username">
</td>
<td>
<span class="error_form" id="username_error_message"></span>
</td>
</tr>
<tr>
<td>Password: </td>
<td>
<input type="password" class="form_text" id="form_password">
</td>
<td>
<span class="error_form" id="password_error_message"></span>
</td>
</tr>
<tr>
<td>Retype Password: </td>
<td>
<input type="password" class="form_text" id="form_retype_password">
</td>
<td>
<span class="error_form" id="retype_password_error_message"></span>
</td>
</tr>
<tr>
<td>Email: </td>
<td>
<input type="text" class="form_text" id="form_email">
</td>
<td>
<span class="error_form" id="email_error_message"></span>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" class="sbmt_btn" value="Create Account">
</td>
<td></td>
</tr>
</table>
</form>
309
asked Mar 14 '26 18:03
Here is an example using the jQuery Validation Plugin. Its as simple as calling .validate(); on your form
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
<script type="text/javascript">
$("#commentForm").validate();
</script>
</head>
It covers email, required input validation and much more. Check out the docs here.
Also, using the submitHandler option for the plugin you can set a callback on submit if all fields are correctly validated. In the example below we use this to call alert() with the message 'Everythings Ok'.
$(document).ready(function() {
$("#commentForm").validate({
//we can use the handler to check if form is correctly validated
submitHandler: function(form) {
alert('Everythings Ok');
}
});
});input[class="error"], textarea[class="error"] {
border: 1px solid #f00 !important;
}
.error{
margin: 5px;
color: #f00 !important;
}
/* To cover your additional requirement mentioned in the comments */
body {
background: lightblue url(http://images.all-free-download.com/images/graphiclarge/winter_background_311052.jpg) no-repeat fixed center;
}
/* For your additional requirement */
form {
background-color: transparent;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>Doing this with jQuery would require a lot of different validation techniques most likely including other libraries like Regex. The plugin aggregates all of them into one plugin that can be reused across multiple pages.
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
