Develop Reference

jQuery Wordpress Issue Form Validation

I have been through a series of revisions on this website I'm working on, basically, I need to add validation to email input field that only allows .edu extension for an only student type registrations.
Currently, there is a dropdown by which someone can select either student or a business. So when someone selects a student I want that validation rule to apply that only .edu can only register.
After struggling through google and StackOverflow I coded two scripts in jQuery which does not seem to be working well.
A user fills all the form fields and when at the select student the email input field should be checked and should stop the user to create an account if it does have .edu extension.
Code 1:
jQuery( document ).ready(function(){
jQuery('#reg_email').on('input',function(e){
var email = document.getElementById("reg_email");
var counter = 0;
if(jQuery(".chosen-single span").text().search("Student") == 0){
if (email.value.indexOf("#") != -1) {
if (!(/(.+)#(.+)\.(edu)$/.test(email.value))) {
if(counter<=0){
jQuery('#signup-dialog input[type="submit"]').prop('disabled', true);
jQuery(".form-row.form-row-wide:eq(1)").append('<p id="alert" style="padding-top:5px;color:red;">You are not eligible for an account. Please enter a valid .edu email.</p>');
counter++;
}
}else{
jQuery(#alert).remove();
jQuery('#signup-dialog input[type="submit"]').prop('disabled', false);
}
}
}
});
});
This Code above repeatedly adds the p tag but i tried to bound it to only once.
Code 2:
jQuery( document ).ready(function(){
var email = document.getElementById("reg_email");
if(jQuery(".chosen-single span").text().search("Student") == 0){
jQuery("#reg_email").validate({
rules: {
email: {
required: true,
email: true,
pattern: /(\.edu\.\w\w\w?)$/
}
}
});
}
});
This does not even work I have even included two scripts the validate.min.js and the additional-methods.min.js but still does not work.
It's like I'm starting to have a feeling that this is not even possible.
Please if someone can help it will be appreciated.
The website is website When you click signup you will see the sign-up modal box.
For now, I have removed all custom JS code. So you guys can check in the console.
P.S EDIT
Code 3: I tried even this
jQuery( document ).ready(function(){
var email = document.getElementById("reg_email");
var done = false;
jQuery(".chosen-single span").on('DOMSubtreeModified', function () {
if(jQuery(".chosen-single span").html() == 'Student') {
if (email.value.indexOf("#") != -1) {
if (!(/(.+)#(.+)\.(edu)$/.test(email.value))) {
if(!done) {
jQuery('#signup-dialog input[type="submit"]').prop('disabled', true);
jQuery(".form-row.form-row-wide:eq(1)").append('<p id="alert" style="padding-top:5px;color:red;">You are not eligible for an account. Please enter a valid .edu email.</p>');
done = true;
}
else{
jQuery("#alert").remove();
jQuery('#signup-dialog input[type="submit"]').prop('disabled', false);
}
}
}
});
});
But in this code, I only check domsubtreemodified and generate an alert box if the span value is 'Student' but the rest of the below code is not working.
This is the HTML FORM
<form method="post" class="register workscout_form">
<p class="form-row form-row-wide">
<label for="reg_username">Username <span class="required">*</span>
<i class="ln ln-icon-Male"></i>
<input type="text" class="input-text" name="username" id="reg_username" value="">
</label>
</p>
<p class="form-row form-row-wide">
<label for="reg_email">Email address <span class="required">*</span>
<i class="ln ln-icon-Mail"></i><input type="email" class="input-text" name="email" id="reg_email" value="">
</label>
</p>
<p class="form-row form-row-wide">
<label for="reg_password">Password <span class="required">*</span>
<i class="ln ln-icon-Lock-2"></i><input type="password" class="input-text" name="password" id="reg_password">
</label>
</p>
<p class="form-row terms wc-terms-and-conditions">
<label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">
<input type="checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" name="terms" id="terms" autocomplete="off"> <span>I’ve read and accept the terms & conditions</span> <span class="required">*</span>
</label>
<input type="hidden" name="terms-field" value="1">
</p>
<label for="user_email">I want to register as</label><select name="role" class="input chosen-select" style="display: none;"><option value="employer">Business</option><option value="candidate">Student</option></select><div class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 100%;" title=""><a class="chosen-single" tabindex="-1"><span>Business</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off" readonly=""></div><ul class="chosen-results"></ul></div></div>
<p class="form-row">
<input type="hidden" id="_wpnonce" name="_wpnonce" value="cc26c06e5b"><input type="hidden" name="_wp_http_referer" value="/"> <input type="submit" class="button" name="register" value="Register">
</p>
</form>
This is the last code 4 I'm using It kinda work nicely but just one thing is left is that when let suppose user corrects the email with a proper speciifed edu email the warning should go and the button should be enabled i can't get this to work in this way.
jQuery( document ).ready(function(){
var email = document.getElementById("reg_email");
var done = false;
jQuery("select[name='role']").change(function() {
if(jQuery("select[name='role']").children(':selected').html() == 'Student') {
if (email.value.indexOf("#") != -1) {
if (!(/(.+)#(.+)\.(edu)$/.test(email.value))) {
if(!done) {
jQuery('#signup-dialog input[type="submit"]').prop('disabled', true);
jQuery(".form-row.form-row-wide:eq(1)").append('<p id="alert" style="padding-top:5px;color:red;">You are not eligible for an account. Please enter a valid .edu email.</p>');
done = true;
}
else{
jQuery("#alert").remove();
jQuery('#signup-dialog input[type="submit"]').prop('disabled', false);
}
}
}
}
});
});

This should work, note that this will update on change, not after submitting the form.
function emailValid(email) {
var re = /(\.edu\.\w\w\w?)$/;
return re.test(email);
}
$(document).ready(function() {
$(document).on('change', '#reg_email', function() {
if ($(".chosen-single span").html() == 'Student') {
if (!emailValid($('#reg_email').val())) {
// Alert user that the email is not valid
}
else {
// Remove the alert
}
}
});
});

Okay so here is the complete code which helped me accomplish this task.
jQuery( document ).ready(function(){
var email = document.getElementById("reg_email");
var done = false;
jQuery("select[name='role']").change(function() {
if(jQuery("select[name='role']").children(':selected').html() == 'Student') {
if (email.value.indexOf("#") != -1) {
if (!(/(\.edu\.\w\w\w?)$/.test(email.value))) {
if(!done) {
jQuery('#signup-dialog input[type="submit"]').prop('disabled', true);
jQuery(".form-row.form-row-wide:eq(1)").append('<p id="alert" style="padding-top:5px;color:red;">You are not eligible for an account. Please enter a valid .edu email.</p>');
done = true;
}
else{
jQuery("#alert").remove();
jQuery('#signup-dialog input[type="submit"]').prop('disabled', false);
}
}
}
}if(jQuery("select[name='role']").children(':selected').html() == 'Business') {
done = false;
jQuery("#alert").remove();
jQuery('#signup-dialog input[type="submit"]').prop('disabled', false);
}
});
jQuery("#reg_email").on("change keyup paste", function(){
if(jQuery("select[name='role']").children(':selected').html() == 'Student') {
if (email.value.indexOf("#") != -1) {
if (/(\.edu\.\w\w\w?)$/.test(email.value)) {
jQuery("#alert").remove();
jQuery('#signup-dialog input[type="submit"]').prop('disabled', false);
}else{
if(jQuery("p#alert").length <= 1){
jQuery("p#alert").remove();
jQuery('#signup-dialog input[type="submit"]').prop('disabled', true);
jQuery(".form-row.form-row-wide:eq(1)").append('<p id="alert" style="padding-top:5px;color:red;">You are not eligible for an account. Please enter a valid .edu email.</p>');
done = true;
}
}
}
}
});
});
Everything is now working and it's awesome! It might help someone so though post this.

Form validation not working using onsubmit

My form validation used to work but now I cannot figure out what is wrong.
When entering an email or username you always get a pop-up with the error
Username or Email is needed
Remove each check one by one and you get the next error message
<form method='POST' name='signIn' onsubmit='return checkLoginForm(this);'>
<input type='hidden' name='action' value='signIn'>
<div class='enterInfo' align='left'>Username or Email 1:</div><input size='60' type='text' name='username' class='input' id='theFieldID'></div>
<div class='enterInfo' align='left'>Password: <input id='username' size='60' type='password' name='pswd' class='input'></div>
<div class='agreement' align='left'> </div>
<input type='submit' value='Log In'>
</form>
Here is the js
function checkLoginForm(form) {
if(form.username.value == "") {
alert("Username or Email is needed");
form.username.focus();
return false;
}
if(form.username.value.length < 4) {
alert("Username or Email is to short");
form.username.focus();
return false;
}
re = /^[-_a-zA-Z0-9.,##!?]*$/;
if(!re.test(form.username.value)) {
alert("Username or Email only contains letters, numbers and _-.,##!?");
form.username.focus();
return false;
}
if(form.pswd.value == ""){
alert("Password is needed");
form.pwd1.focus();
return false;
}
return true;
}

The best way to access to this kind of elements is By Id. Also, for more optimization and comfortable, it's better to assign a variable to the element one time and use that variable for the next times:
function checkLoginForm(form) {
usn = document.getElementById("theFieldID");
pwd = document.getElementById("password");
if(usn.value == "") {
alert("Username or Email is needed");
usn.focus();
return false;
}
if(usn.value.length < 4) {
alert("Username or Email is to short");
usn.focus();
return false;
}
re = /^[-_a-zA-Z0-9.,##!?]*$/;
if(!re.test(usn.value)) {
alert("Username or Email only contains letters, numbers and _-.,##!?");
usn.focus();
return false;
}
if(pwd.value == ""){
alert("Password is needed");
pwd.focus();
return false;
}
return true;
}
<form method='POST' name='signIn' onsubmit='return checkLoginForm(this);'>
<input type='hidden' name='action' value='signIn'>
<div class='enterInfo' align='left'>Username or Email 1:</div><div>
<input size='60' type='text' name='username' class='input' id='theFieldID'></div>
<div class='enterInfo' align='left'>Password: <input id='password' size='60' type='password' name='pswd' class='input'></div>
<div class='agreement' align='left'> </div>
<input type='submit' value='Log In'>
</form>

For this kind of thing:
if(form.username.value == "") {
alert("Username or Email is needed");
form.username.focus();
return false;
}
You are better off directly accessing the object:
if(document.getElementById("theFieldID").value == "") {
alert("Username or Email is needed");
form.username.focus();
return false;
}
In any case, you need to pay attention to what your names and IDs are on those elements. For instance, you are passing in "form" as an argument, but with no name or ID specified, there is nothing to tell it which form you are talking about.

input type ="submit" will submit the form ,
You need to use event.preventDefault to prevent the default behavior and to perform validation
Also form.username.focus() & form.username.focus(); will throw not a function error
You need use document.getElmentById(someElement').focus()
JSFIDDLE

Use this code :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function checkLoginForm() {
var eleuser = document.forms["signIn"]["username"];
var elepass = document.forms["signIn"]["pswd"];
var username = eleuser.value;
var pass = elepass.value;
if(username == "") {
alert("Username or Email is needed");
eleuser.focus();
return false;
}
if(username.length < 4) {
alert("Username or Email is to short");
eleuser.focus();
return false;
}
re = /^[-_a-zA-Z0-9.,##!?]*$/;
if(!re.test(username)) {
alert("Username or Email only contains letters, numbers and _-.,##!?");
eleuser.focus();
return false;
}
if(pass == ""){
alert("Password is needed");
elepass.focus();
return false;
}
return true;
}
</script>
<form method="post" name='signIn' onsubmit='return checkLoginForm();'>
<div class='enterInfo' align='left'>Username or Email 1:</div>
<input size='60' type='text' name='username' class='input' id='theFieldID'>
<div class='enterInfo'> Password: </div>
<input id='username1' size='60' type='password' name='pswd' class='input'>
<br><br>
<input type='submit' value='Log In'>
</form>
</body>
</html>

changing visibility on submit - only flashes visible

I am trying just to make the span tag appear when the submit button is pressed using the following code:
<form onsubmit="checkName(this);">
<ul>
<li>Surname<br><input type="text" name="username"><span id="surnameMissing">Surname is a required field</span></li>
...
<li><input type="submit"></li>
</ul>
</form>
My Javasrcipt:
function checkName(form){
if (form.username.value == "") {
document.getElementById("surnameMissing").style.visibility = "visible";
}
return false;
}
The span is set initially to hidden and changed upon submission however the tag only appears for a split second then goes back to being hidden. Any suggestions as to why this is?

This form is submitted that's why you see it only for second.
You need to prevent the submit if the form is invalid - Add return in the attribute onsubmit.
Like this:
function checkName(form) {
if (form.username.value == "") {
document.getElementById("surnameMissing").style.visibility = "visible";
}
return false;
}
#surnameMissing {
visibility:hidden;
}
<form onsubmit="return checkName(this);">
<ul>
<li>Surname<br><input type="text" name="username"><span id="surnameMissing">Surname is a required field</span></li>
...
<li><input type="submit"></li>
</ul>
</form>
Another option is to pass the event to the function, then use .preventDefault() like this:
function checkName(form, event) {
event.preventDefault();
if (form.username.value == "") {
document.getElementById("surnameMissing").style.visibility = "visible";
}
return false;
}
#surnameMissing {
visibility:hidden;
}
<form onsubmit="checkName(this, event);">
<ul>
<li>Surname<br><input type="text" name="username"><span id="surnameMissing">Surname is a required field</span></li>
...
<li><input type="submit"></li>
</ul>
</form>

It is because the form is submitted once you click submit. To prevent it from submitting, use this code.
<script>
function checkName(form){
if(form.username.value == ""){
document.getElementById("surnameMissing").style.visibility = "visible";
return false;
}
return true;
}
</script>
<form onsubmit="return checkName(this);">
<ul>
<li>Surname<br><input type="text" name="username"><span style="visibility:hidden;" id="surnameMissing">Surname is a required field</span></li>
...
<li><input type="submit"></li>
</ul>
</form>

Prevent your form from being submitted by adding event.preventDefault(); below your function name. And then make sure you will submit your form when username.value == "" returns false.
function checkName (form) {
// prevent from submission
event.preventDefault();
if(form.username.value == "") {
document.getElementById("surnameMissing").style.visibility = 'visible';
} else {
// Submit on successful validation
form.submit();
}
}
You can also add event.preventDefault() before you call your function in the onsubmit attribute of your form.
<form onsubmit="event.preventDefault(); checkName(this);"> ... </form>
Personally, I would also like to trap the event during the input itself. Not just during submission.
<form id="myForm">
<ul>
<li>Surname: <br><input type="text" name="username" id="username">
<span id="surnameMissing">Surname is a required field</span></li>
<li><input type="submit"></li>
</ul>
</form>
and the javascript
var form = document.getElementById("myForm");
form.addEventListener('submit', function(e) {
e.preventDefault();
if(this.username.value == "") {
document.getElementById("surnameMissing").style.visibility = 'visible';
} else {
this.submit();
}
});
var inputUsername = document.getElementById("username");
inputUsername.addEventListener('keyup', function(e) {
if(this.value == "") {
document.getElementById("surnameMissing").style.visibility = 'visible';
} else {
document.getElementById("surnameMissing").style.visibility = 'hidden';
}
});

Javascript form validation alert

Here is the HTML
<input class="btn" onClick="return IsEmpty()" type="submit" name='submit' value="submit"/>
The javascript
function IsEmpty(){
if(document.forms['form'].name.value == "")
{
alert("empty");
return false;
}
if(document.forms['form'].name.value != ""){
alert('Thank You, Your order is being processed');
return true;
}
}
What I am trying to do is get the thank you alert to show only if all fields are filled out. Currently, the form catches the missing input but still alerts the thank you message.

Please try this :
function IsEmpty() {
if (document.forms['form'].name.value == "") {
alert("empty");
return false;
}
alert('Thank You, Your order is being processed');
return true;
}
DEMO

Try this
function IsEmpty(){
if(document.forms['form'].name.value == "")
{
alert("empty");
return false;
}
if(document.forms['form'].name.value != ""){
alert('Thank You, Your order is being processed');
return true;
}
}
<form name="form" action="">
<input name="name" />
<input class="btn" onClick="return IsEmpty()" type="submit" name='submit' value="submit" />
</form>

html javascript php zip code data validation

I am adding a data validation to my code. I want to make sure the event title is not blank, and the zip code entered is valid. The javascript does not work. Can you tell me why?
<form name="form1" action="organize.php" onSubmit="return validateform1();" method="post" enctype="multipart/form-data">
<div class="form-element">
<label for="event_title">Event Title</label>
<input type="text" name="event_title" id="dob" />
</div>
<div class="form-element">
<label for="zip">Zip Code</label>
<input type="text" name="zip" id="dob" />
</div>
<script language="javascript">
function validateform1(){
var zipcode = /^\+?([0-9]{2})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4})$/;
if(document.form1.event_title.value==""){
alert("Enter a title");
return false;
}
else if((!document.form1.zip.value.match(zipcode)){
alert("wrong zip format");
return false;
}
</script>
</form>

you have missed closing ) in this line:
else if((!document.form1.zip.value.match(zipcode)) {
should be :
else if((!document.form1.zip.value.match(zipcode))) {
or:
else if(!document.form1.zip.value.match(zipcode)) {
Always you should see browser console.you can see hint to get rid of your issues.

Probably doesn't help that your ZIP field has id="dob", but I think the main issue is that your function is missing a closing }, and your else if (( has an extra (. Try this:
function validateform1() {
var zipcode = /^\+?([0-9]{2})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4})$/;
if (document.form1.event_title.value == "") {
alert("Enter a title");
return false;
} else if (!document.form1.zip.value.match(zipcode)) {
alert("wrong zip format");
return false;
}
}