Develop Reference

Validation for text input in JavaScript

I am writing form with small js function and email regex. I want to make validation and display error when input is empty or string for email (id = "email") is not valid. I want as well to make possibility to remove error class from input after clicking the button, when requirement for input will be achieved. In this moment my function will not remove error class from not email input unless correct email will be implemented (regex), so even if another input is ok, i am not able to pass the validation for that input until email will be correct.
My code:
Validation();
function Validation() {
$('.my-button').click(function(){
$("input,textarea").each(function() {
var element = $(this);
var reg = /^([A-Za-z0-9_\-\.])+\#([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var email = document.getElementById("email");
var notification = document.getElementById("notification");
if (element.val() == "") {
element.closest('.label-error').css('visibility', 'visible');
element.closest('.my_item').addClass('error');
notification.style.display = "block";
}
else if (!reg.test(email.value)) {
element.closest('.label-error').css('visibility', 'visible');
element.closest('.my_item').addClass('error');
email.focus;
return false;
}
else if (!element.val() == "") {
element.closest('.label-error').css('visibility', 'hidden');
element.closest('.my_item').removeClass('error');
notification.style.display = "none";
}
});
});
}
}
Edit: html code below:
<div class="write-to-us">
<div class="col-md-12 field">
<p>Write to us</p>
</div>
<div class="col-md-12 field">
<div class="my_item">
<label>Name</label>
<input type="text" name="subject" class="my-text-input">
<div class="label-error">Write your Name</div>
</div>
</div>
<div class="col-md-12 field">
<div class="my_item">
<label>Surname</label>
<input type="text" id="email" name="email" class="my-text-input">
<div class="label-error">Write your email</div>
</div>
</div>
<div class="col-md-12 field">
<div class="my_item">
<label">Question</label>
<textarea type="text" name="subject" class="my-text-input"></textarea>
</div>
</div>
<div>
<button class="my-button">Check it</button>
</div>
</div>
Does anyone has idea how to solve it? To remove error class from other inputs and leave error only on email (if only email is incorrect)?

The problem is you check if the "email" element is correct for every input or textarea element. If you put another condition to check if the current element in the loop is the "email" element it should work fine.
Something like this:
function Validation() {
$('.my-button').click(function(){
$("input,textarea").each(function() {
var element = $(this);
var reg = /^([A-Za-z0-9_\-\.])+\#([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var notification = document.getElementById("notification");
if (element.val() == "") {
element.closest('.label-error').css('visibility', 'visible');
element.closest('.my_item').addClass('error');
notification.style.display = "block";
}
else if (!element.val() == "") {
element.closest('.label-error').css('visibility', 'hidden');
element.closest('.my_item').removeClass('error');
notification.style.display = "none";
}
if (element.attr("id") === "email" && !reg.test(element.val())) {
element.closest('.label-error').css('visibility', 'visible');
element.closest('.my_item').addClass('error');
element.focus;
}
});
});
}
}
I did not test it, but the idea is there. If you provide your html code I'll test it out.

My JS function is not printing anything when two passwords does not matches

How can I make password field to check each other that the value written by user matches ?
function checkPassword(form) {
pOne = form.pOne.value;
pTwo = form.pTwo.value;
// If password not entered
if (pOne == '')
alert("Please enter Password");
// If confirm password not entered
else if (pTwo == '')
alert("Please enter confirm password");
// If Not same return False.
else if (pOne != pTwo) {
// alert ("\nPassword did not match: Please try again...")
document.querySelector(".submit").addEventListener("click", print)
function print() {
return document.querySelector(".pass").textContent = "Your password does not match!"
}
}
// If same return True.
else {
document.querySelector(".submit").addEventListener("click", print)
function print() {
return document.querySelector(".pass").textContent = "Your password match perfectly!"
}
}
}
<form class="formtwo" onsubmit="checkPassword(this)">
<input type="email" name="email" placeholder="Email"><br>
<input type="password" name="pOne" placeholder="Password">
<input type="password" name="pTwo" placeholder="Re-Type Password">
<p class="pass">djkakj</p>
<button type="submit" class="submit">Submit</button>
</form>

You need to add the event listener to the form submit before you test
window.addEventListener("load", function() {
document.getElementById("formtwo").addEventListener("submit", function(e) {
const pOne = this.pOne.value;
const pTwo = this.pTwo.value;
const pass = document.querySelector(".pass");
let errors = [];
// If password not entered
if (pOne == '') errors.push("Please enter Password");
if (pTwo == '') errors.push("Please enter confirm password");
if (pOne != pTwo) errors.push("Password did not match: Please try again...")
if (errors.length > 0) {
e.preventDefault(); // this will stop submission
alert(errors.join("\n"))
pass.textContent = "Your password does not match!"
return;
}
pass.textContent = "Your password match perfectly!"
})
})
<form id="formtwo">
<input type="email" name="email" placeholder="Email"><br>
<input type="password" name="pOne" placeholder="Password">
<input type="password" name="pTwo" placeholder="Re-Type Password">
<p class="pass">djkakj</p>
<button type="submit" class="submit">Submit</button>
</form>

You can check my solution. Hope it's easier to understand. There were some issues in your code.
If you want to prevent the form submit if the password doesn't match then you need to use event.preventDefault to prevent the default behaviour.
You can fire the submit event once and then check for your required values.
const form = document.querySelector('.formtwo');
form.addEventListener('submit', checkPassword);
function checkPassword(e) {
e.preventDefault();
let pOne = form.pOne.value;
let pTwo = form.pTwo.value;
// If password not entered
if (pOne == "") alert("Please enter Password");
// If confirm password not entered
else if (pTwo == "") alert("Please enter confirm password");
// If Not same return False.
else if (pOne != pTwo) {
document.querySelector(".pass").textContent =
"Your password does not match!";
}
// If same return True.
else {
document.querySelector(".pass").textContent =
"Your password match perfectly!";
// submitting form
form.submit();
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form class="formtwo">
<input type="email" name="email" placeholder="Email"><br>
<input type="password" name="pOne" placeholder="Password">
<input type="password" name="pTwo" placeholder="Re-Type Password">
<p class="pass">Password matching status</p>
<button type="submit" class="submit">Submit</button>
</form>
</body>
</html>

Preserve line break in textarea when using mailto

I have a textarea where a user can insert some text, and after it hits the "Send" button, the text should be copied (as it was entered) in the default email window (I have tried with Outlook).
For now, if I want to enter:
abcd
def
I will get the output:
abcd</br></br>def
This is the html file:
<div class="form-group">
<label for="message" class="sr-only">Message</label>
<textarea name="message" id="message" class="form-control" cols="30" rows="7" placeholder="Message" minlength="5" data-validation-minlength-message="Min 5 characters" maxlength="999" required></textarea>
</div>
<div class="form-group">
<input type="submit" value="Send Message" onclick="javascript: sendemail();" class="btn btn-primary" id="abcd">
</div>
And this is the .js file:
function sendemail() {
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var message2 = document.getElementById('message').value;
var myLineBreak = message2.replace(/\r\n|\r|\n/g, "</br>");
var pattern = /[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+#[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*/;
if (name.length == 0)
alert("Please complete the Name field!");
else
if (pattern.test(String(email).toLowerCase()) == 0)
alert("Please enter a valid email address!");
else
if (message2.length < 5)
alert("Message too short!");
else {
document.getElementById("form1").action = "mailto:JustinF#somesite.com&body=" + myLineBreak;
document.getElementById("form1").submit();
}
}
I've tried also to add this to style.css:
#abcd {
white-space: pre-wrap;
}
but with no luck... ('abcd' is the id of the "Send" button)

I managed to figured it out.
I replaced
var myLineBreak = message2.replace(/\r\n|\r|\n/g, "</br>");
with
var myLineBreak = message2.replace(/\r\n|\r|\n/g, "%0D%0A");
Now it works perfectly.

Displaying an error in certain way

<!DOCTYPE html>
<html>
<body>
<div class="needContent">
<label for="Password">Password</label>
<span class="red-star">∗</span>
<input type="password" name="Password" id="Password" required="required" onkeyup="starShow()" pattern="^(?=.*\[a-z\])(?=.*\[A-Z\])(?=.*\d)\[a-zA-Z\d\]{8,}$" onchange="check()">
</div>
<div class="needContent">
<label for="Retype_Password">Retype Password</label>
<span class="red-star">∗</span>
<input type="password" name="Retype_Password" id="Retype_Password" pattern="^(?=.*\[a-z\])(?=.*\[A-Z\])(?=.*\d)\[a-zA-Z\d\]{8,}$" required="required" onkeyup="starShow()" onchange="check()">
<p id="status"></p>
<div id="phoneNumber" class="needContent">
<label for="Phone_Number" >Phone Number</label>
<span class="red-star">∗</span>
<input type="tel" name="Phone_Number" id="Phone_Number"
required="required" onchange="Error()" placeholder="999-999-9999"
onkeyup="starShow()" >
<p id="showEorror"></p>
</div>
</div>
<script>
function Error() {
var phn = document.getElementById("Phone_Number").value;
if(phn[3]!="-" && phn[7] != "-" ) {
document.getElementById("showEorror").innerHTML="<span>X</span> The area code of phone number 999-999-9999 can't be all zeros.";
}else if(phn[0] == 0 || phn[1] == 0 && phn[2] == 0){
document.getElementById("showEorror").innerHTML="<span>X</span> The area code of phone number 999-999-9999 can't be all zeros.";
} else {
document.getElementById("showEorrr").style.display = "none";
}
}
function check() {
var pass1 = document.getElementById("Password").value;
var pass2 = document.getElementById("Retype_Password").value;
if (pass1 != "" && pass2 != "") {
if (pass1 != pass2) {
document.getElementById("status").innerHTML = "<span>X</span> Doesn't Match.";
}
}
}
</script>
</body>
</html>
So I am working on my school project and I am trying to display the error "Doesn't Match" same as the one for the phone but I don't know what I am doing wrong. I have attached a screen shot of my output.

You're not resetting the #status text after the password gets properly entered. Try this instead:
if (pass1 != "" && pass2 != "") {
if (pass1 != pass2) {
document.getElementById("status").innerHTML = "<span>X</span> Doesn't Match.";
} else document.getElementById("status").textContent = 'ok';
}
For the phone section, you have a typo or two: "showEorror" vs "showEorrr", which means that, again, the error text does not go away. I recommend using showError or showPhoneError instead.

password and confirm password not working on onclick

<script>
var password= document.forms["PestControl"]["password"].value;
var confirmpassword= document.forms["PestControl"]["confirmpassword"].value;
function validateForm() {
//alert('inside');
if(!validatePassword()){
alert("password did not matched or blank password fields");
document.forms["PestControl"]["password"].focus();
return false;
}
else if($.trim(password) != $.trim(confirmpassword)){
alert("password did not matched");
document.forms["PestControl"]["password"].focus();
return true;
}
else {
document.PestControl.action = "medical_college_process.php?trans=addcollege";
document.PestControl.method = "post";
document.PestControl.submit();
}
}
function validatePassword(){
var password= document.forms["PestControl"]["password"].value;
var confirmpassword= document.forms["PestControl"]["confirmpassword"].value;
var Exist = false;
if((password.value === '') && (confirm_password.value==='')) {
alert();
Exist = false;
}
else if(password.value != confirm_password.value) {
Exist = false;
}
else {
Exist = true;
}
async:false;
return Exist;
}
</script>
<div class="form-group col-md-12" style="text-align: right;margin-top: 10px;">
<label style="margin-bottom: 0px;">Password</label>
<input id="password" type="password" class="form-control" name="password" value="">
</div>
<div class="form-group col-md-12" style="text-align: right;margin-top: 10px;">
<label style="margin-bottom: 0px;">Confirm Password </label>
<input id="confirm_password" type="password" class="form-control" name="confirmpassword" value="">
</div>
<div class="col-md-12" style="text-align: right;margin-top: 10px;">
<button type="button" id="button1" name="" onclick="return validateForm()" class="btn btn-w-m btn-primary">Save</button>
when i click on save button for password and confirm password i m getting an alert of password did not match or blank password for non-matching password as well as for matching password ...getting same alert message
when i click on save button for password and confirm password i m getting an alert of password did not match or blank password for non-matching password as well as for matching password ...getting same alert message
when i click on save button for password and confirm password i m getting an alert of password did not match or blank password for non-matching password as well as for matching password ...getting same alert message
when i click on save button for password and confirm password i m getting an alert of password did not match or blank password for non-matching password as well as for matching password ...getting same alert message

Please have a look at below code. It worked on my side.
function validatePassword(){
var password= document.forms["PestControl"]["password"];
var confirmpassword= document.forms["PestControl"]["confirmpassword"];
var Exist = false;
if((password.value === '') && (confirmpassword.value==='')) {
alert('no input');
Exist = false;
}
else if(password.value != confirmpassword.value) {
alert('wrong password');
Exist = false;
}
else {
alert('correct');
Exist = true;
}
async:false;
return Exist;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="PestControl">
User password:<br>
<input type="password" name="password"> <br>
User confirm password:<br>
<input type="password" name="confirmpassword">
<input type="button" value="save" onclick="validatePassword()">
</form>

function validatePassword(){
var password= document.getElementById("your pass id").value;
var confirmpassword= document.getElementById("confirm_password").value;
var Exist = false;
if((password === '') && (confirmpassword==='')) {
alert();
Exist = false;
}
else if(password != confirmpassword) {
Exist = false;
}
else {
Exist = true;
}
}