We Keep Coding

how do I get Javascript to recognise an email address?

I am trying to give a textfield a dual function. So, if you type, say, 12345, into it, it finds the relevant data. But if you type an email-address, or essentially anything with an XXX#XXX.XXX format, I want the password-field and button to appear. I've been trying to use regex, but for some reason it does not work, and everything is recognised as an email, so even 12345 opens the login-things. Can you help me? I've tried getting the gist into the snippets.
function imgMain() {
var iDCode = document.getElementById("IDQuery").value;
var mail = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+#[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
if (iDCode = mail) {
console.log("this is a mail");
document.getElementById("passwordDiv").style.display = "block";
document.getElementById("loginbuttonDiv").style.display = "block";
document.getElementById("SeeSlide").style.display = "none";
} else {
console.log("this is not a mail")
}
}
<div id="QueryField">
<input type="text" id="IDQuery" placeholder="ID Kode">
<div style="display: none" id=passwordDiv><input type="password" id="passwordfield"><br></div>
<div style="display: none" id=loginbuttonDiv><button id="login" onclick="login()">log ind</button><br></div>
<button id="SeeSlide" onclick="imgMain()">Se Slide</button><br>
<br><br><br><br>
</div>

user mail.test() with proper regex like so
let mail = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(mail.test(iDCode)){
alert("Valid email is required")
}

You can try this version, it's based on the w3resource.
function imgMain() {
var iDCode = document.getElementById("IDQuery").value;
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (iDCode.match(mailformat)) {
console.log("this is a mail");
document.getElementById("passwordDiv").style.display = "block";
document.getElementById("loginbuttonDiv").style.display = "block";
document.getElementById("SeeSlide").style.display = "none";
} else {
console.log("this is not a mail")
}
}
<div id="QueryField">
<input type="text" id="IDQuery" placeholder="ID Kode">
<div style="display: none" id=passwordDiv><input type="password" id="passwordfield"><br></div>
<div style="display: none" id=loginbuttonDiv><button id="login" onclick="login()">log ind</button><br></div>
<button id="SeeSlide" onclick="imgMain()">Se Slide</button><br>
<br><br><br><br>
</div>

In your if statement you have if (iDCode = mail).
This re-assigns the value of mail to the variable iDCode. So the if effectively becomes if(mail) which is always true, because RegEx objects are truthy.
You should instead be checking if the input matches the regex, using either mail.test(iDCode) or iDCode.match(mail)

Few different ways. You can send an email to that address and check whether it bounces back or you can use PHP (I doubt you want to do this since your question is JavaScript) and send an email and then have them confirm it on the web address. Honestly, PHP is the best way to do this but since you're using JS you can try this from https://www.w3resource.com/javascript/form/email-validation.php:
function ValidateEmail(mail) {
if (/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value)) {
return (true)
}
alert("You have entered an invalid email address!")
return (false)
}
This works because we are checking all the invalid characters that are in an email address. If the input field contains any of those characters, its invalid.
Try Googling the answer. There are lots of information:
https://www.google.com/search?rlz=1C1GCEB_enUS865US865&ei=bn9dXuefDanJ0PEPofOHyAg&q=javacsript+check+email+address&oq=javacsript+check+email+address&gs_l=psy-ab.3..0i71l8.2549.3358..3533...0.2..0.0.0.......12....1..gws-wiz.........23%3A11-12j24%3A11-2.1hEMZpGGmWs&ved=0ahUKEwjnjr7N4vznAhWpJDQIHaH5AYkQ4dUDCAw&uact=5&safe=active&ssui=on

You can try using the .validate function. It works really great for checking login forms.
The function could look like the following:
$("#IDQuery").validate({
rules: {
email:
{required: true, email: true},
password:
{required: true}
},
messages: {
email:
{required: 'Please enter a E-mail',
email: 'Please enter a valid E-mail'},
password:{required: 'Please enter a password'}
},
errorPlacement: function (error, element) {
error.insertAfter(element.parent());
}
});

Regex for jquery password

I am busy using a jquery script that validates users password in real time. I would like to adjust it only accept a password if it has a letter, number and special character in it.
jQuery("#ValidEmail").validate({
expression: "if (VAL.match(/^[^\\W][a-zA-Z0-9\\_\\-\\.]+([a-zA-Z0-9\\_\\-\\.]+)*\\#[a-zA-Z0-9_]+(\\.[a-zA-Z0-9_]+)*\\.[a-zA-Z]{2,4}$/)) return true; else return false;",
message: "Please enter a valid Email ID"
});
jQuery("#ValidPassword").validate({
expression: "if (VAL.match(/^[^\\W][a-zA-Z0-9\\_\\-\\.]+([a-zA-Z0-9\\_\\-\\.]+)*\\#[a-zA-Z0-9_]+(\\.[a-zA-Z0-9_]+)*\\.[a-zA-Z]{2,4}$/)) return true; else return false;",
message: "Please enter a special character"
});
I am stumped on how to do this as it does not accept normaly regex experesions that I can find off the web eg
(/^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])([a-zA-Z0-9]{8,})$/)
Any idea on how to solve this. Im bashing my head in here

As far as I can tell from the documentation, what you're using is not a supported syntax for adding validation methods to jQuery validate:
/* INCORRECT: */
jQuery("#element").validate({
expression: "if (/*...*/) return true; else return false;",
message: "Please enter a valid Email ID"
});
If you need custom validation rules, that is done with addMethod():
/* CORRECT: */
jQuery.validator.addMethod("methodname", function(value, element) {
// return true if value is valid
}, "message");
jQuery("#myform").validate({
rules: {
elementname: "methodname",
/* ... */
}
});
Your custom "email" validator is unnecessary; jQuery validate has its own. Here is an example of your password validator in action:
jQuery.validator.addMethod(
"myPasswordMethod",
function(value, element) {
// This is your regex, I have not looked closely at it to see if it is sensible
return value.match(/^[^\W][a-zA-Z0-9\_\-\.]+([a-zA-Z0-9\_\-\.]+)*\#[a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\.[a-zA-Z]{2,4}$/);
},
"Please enter a valid password"
);
$("#myForm").validate({
rules: {
pwd: "myPasswordMethod",
mail: "email" // don't reinvent the wheel; there is a built-in email validation method
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<form id="myForm">
<label for="mail">Email</label>
<input id="mail" name="mail"><br>
<label for="pwd">Password</label>
<input id="pwd" name="pwd"><br>
</form>
As discussed exhaustively in comments, clientside password validation (or any other clientside validation) is insufficient on its own. Validate on the client for the user's convenience; re-validate on the server to prevent user shenanigans or to handle disabled clientside scripting.

jQuery Validate using onclick handler not validating fields?

I want to use an onlick event handler to validate some form fields using jquery Validate. To do this I have the following code:
<input type="text" id="Name" name="Name">
<a class="btn btn-primary js-add-names" href="#">Add Names</a>
<input type="text" id="Age" name="Age">
<a class="btn btn-primary js-add-ages" href="#">Add Age</a>
<script>
$(".js-add-names").click(function (e) {
e.preventDefault();
$("form").validate({
rules: {
Name: {
required: true
}
},
messages: {
Name: "The Name is required"
}
});
if (!$("form").valid()) {
return;
}
// otherwise do stuff but we dont want to submit form
});
$(".js-add-ages").click(function (e) {
e.preventDefault();
$("form").validate({
rules: {
Age: {
required: true
}
},
messages: {
Age: "The Age is required"
}
});
if (!$("form").valid()) {
return;
}
// otherwise do stuff but we dont want to submit form
});
</script>
What I've noticed is that only one event handler works out the two based on whichever one was clicked first i.e. if I click the button with class js-add-names, the validation for that handler works as expected.
Now If I click the button with class js-add-ages having previously clicked js-add-names then the handler for js-add-age doesn't work and vis versa?
Any ideas why this is happening and what is the fix?
* UPDATE *
Further to suggestion by Sparky I have re-written the code as below but now when I click js-add-names, the validation for that handler works as expected
Now If I click the button with class js-add-ages having previously clicked js-add-names then the handler for js-add-age doesn't work becuase the validation has previously added a rule for input #Name. How do I reset the form or remove the rules each time the event handlers fire?
<form>
<input type="text" id="Name" name="Name">
<a class="btn btn-primary js-add-names" href="#">Add Names</a>
<input type="text" id="Age" name="Age">
<a class="btn btn-primary js-add-ages" href="#">Add Age</a>
// other inputs
<input type="checkbox" name="CarOwner" value="Yes"> Car owner
<input type="submit" value="Submit">
</form>
<script>
$("form").validate();
$(".js-add-names").click(function (e) {
e.preventDefault();
$("#Age").rules("remove");
$("#Name").rules("add", {
required: true,
messages: {
required: "The Name is required"
}
});
if (!$("form").valid()) {
return;
}
// otherwise do stuff but we dont want to submit form
// ...
//Reset input field
$("#Name").val('');
});
$(".js-add-ages").click(function (e) {
e.preventDefault();
$("#Name").rules("remove");
$("#Age").rules("add", {
required: true,
messages: {
required: "The Age is required"
}
});
if (!$("form").valid()) {
return;
}
// otherwise do stuff but we dont want to submit form
// ...
//Reset input field
$("#Age").val('');
});
</script>

Any ideas why this is happening and what is the fix?
The .validate() method is only used for initializing the plugin on your form and therefore should only be called once when the page is loaded. Subsequent calls are always ignored. So when you use one click handler, you initialize the validate plugin, and the other call to .validate() in the other click handler will do nothing.
The fix...
Call .validate() ONE time to initialize the plugin on your form.
Do NOT call .validate() from a click handler since this is not the testing method; it's only the initialization method.
Use the plugin's built-in submitHandler and invalidHandler functions for stuff you need to do when the form is valid and invalid.
Since you appear to be using your click handlers to add fields/rules to an existing form, then use the .rules('add') and .rules('remove') methods to add and remove any rules dynamically.

Checking For Matching Email's In HTML Form

I have a webpage where a user submits a form containing an email field and a confirm email field.
How do I check to make sure both of these fields equal the same thing?
<form>
Email: <input type="text" name="email"><br /><br />
Confirm Email: <input type="text" name="confirmemail"><br /><br /><br /><br />
<input type="submit" value="Submit">
</form>

With jQuery, but no error handling, I'd suggest:
$('form').on('submit', function() {
return $('input[name=email]').val() == $('input[name=confirmemail]').val();
});
Ridiculously simple JS Fiddle demo.

Easiest way would be to use Javascript as you can stop form submission before it goes to your php file. However it is still good practice to verify the data entered with the php file as well as there are some programs that will allow you to change data being submitted in a form after javascript checks are made.
<script>
function checkMatch() {
var email = document.getElementById('email').value;
var emailConfirm = document.getElementById('emailConfirm').value;
if (email != emailConfirm) {
alert("Email addresses are not the same.");
return false; //Returning 'false' will cancel form submission
} else {
/*
place the return true; at the end of the function if you do other
checking and just have if conditions and return them as false. If
one thing returns false the form submission is cancelled.
*/
return true;
}
}
</script>
And change your form to have onSubmit
<form method="post" action="submit_query.php" onSubmit="checkMatch()">
Add id's to your email inputs such as: email and emailConfirm. You can change them if you wish but just for an example I used those.

How to display messages in invalidHandler in JQuery validator

I'm trying to use the JQuery validator on a form and am trying to figure out to get the messages of the errors in the invalidHandler option (or if there's somewhere else, do tell).
When a user clicks the submit button, whatever the first error is, I want to display an alert box with the message of the error. I don't want the error to be written on the document. I can't seem to figure out how to get the error messages to use in an alert after validation. I only found how to get the elements, and that doesn't really help me.
Pulling out from the example, here's some code I'm testing with
$(document).ready(function() {
$('#commentForm').validate({
invalidHandler: function(f, v) {
var errors = v.numberOfInvalids();
if (errors) {
var invalidElements = v.invalidElements();
alert(invalidElements[0]);
}
}
});
});
and
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<label for="cname">Name</label>
<em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>

This works for me...
invalidHandler: function(form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'Please correct the following error:\n'
: 'Please correct the following ' + errors + ' errors.\n';
var errors = "";
if (validator.errorList.length > 0) {
for (x=0;x<validator.errorList.length;x++) {
errors += "\n\u25CF " + validator.errorList[x].message;
}
}
alert(message + errors);
}
validator.focusInvalid();
}

I know the question is quite old, but to help other people to get a better answer I would advise you guys not using invalidHandler, but showErrors.
Thats because invalidHandler will be called only when you submit your form while
showErrors is called every time a field is updated.
So, do this:
Script in the end of the page
$("form").validate({
rules: {
name: {
required: true
}
},
messages: {
name: {
required: "required"
}
},
highlight: function (element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error')
$(element).parent().find('.form-control-feedback').removeClass('glyphicon-ok').addClass('glyphicon-remove');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
$(element).parent().find('.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function (error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
showErrors: function (errorMap, errorList) {
var errors = this.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'Your form has 1 error'
: 'Your form has ' + errors + ' errors.';
message = message + ' Please, fix then.'
$("#error span").empty().html(message);
$("#error").show();
} else {
$("#error").hide();
}
this.defaultShowErrors();
},
});
Don't forget your html tag
<div id="error"><span></span></div>

Overloading showErrors worked as expected. I just needed to get the first error message.
showErrors: function(errorMap, errorList) {
alert(errorList[0].message);
}
Also remember to take a look at the onfocusout and onkeyup options, else you'll get continuous messages.

MUST check errorList.length
if (errorList.length > 0) alert(errorList[0].message);

You should not use alert,
But if you really want to use that. Solution depend of how plugin add dom elements but you can remove those dom elements in invalidHandler. So let those dom element added but remove it.
Other option is, you should patch plugin you use for validation and instead of adding dom show alert.