We Keep Coding

How can I enable my button when 'email' field is valid? [duplicate]

This question already has answers here:
How can I validate an email address in JavaScript?
(79 answers)
Closed 1 year ago.
I did this function so that the form button enables when the inputs are different from empty, but I don't know how to do so that in the #email ID the input, in addition to being different from empty, must necessarily contain the character '"#" or the strings "# gmail.com", "# hotmail.com".
This is the function
$(function () {
$('#button').attr('disabled', true);
$('#textarea, #email, #name').change(function () {
if ($('#name').val() != '' && $('#email').val() != '' && $('#textarea').val() != '') {
$('#button').attr('disabled', false);
} else {
$('#button').attr('disabled', true);
}
});
});
This is the HTML
<form id="contact-form" method="POST" action="forms/contact-form-handler.php">
<span class="asterisco">*</span><input name="name" id="name" type="text" class="form-control" placeholder="Nombre" required>
<br>
<span class="asterisco">*</span><input name="email" id="email" type="email" class="form-control" placeholder="Dirección de correo electrónico" required>
<br>
<span class="asterisco">*</span><textarea style="resize: none;" id="textarea" name="message" class="form-control" placeholder="Mensaje" row="4" required></textarea>
<span class="texto-asterisco">Las celdas marcadas con * son obligatorias.</span>
<br>
<div id="button-container">
<button type="submit" id="button" disabled="disabled"></button>
</div>
</form>

Use a regex and test whether the value of the email input field matches it.
const re = /^(([^<>()[\]\\.,;:\s#"]+(\.[^<>()[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
$(function() {
$('#button').attr('disabled', true);
$('#textarea, #email, #name').change(function() {
if ($('#name').val() != '' && re.test($('#email').val()) != '' && $('#textarea').val() != '') {
$('#button').attr('disabled', false);
} else {
$('#button').attr('disabled', true);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="contact-form" method="POST" action="forms/contact-form-handler.php">
<span class="asterisco">*</span><input name="name" id="name" type="text" class="form-control" placeholder="Nombre" required>
<br>
<span class="asterisco">*</span><input name="email" id="email" type="email" class="form-control" placeholder="Dirección de correo electrónico" required>
<br>
<span class="asterisco">*</span><textarea style="resize: none;" id="textarea" name="message" class="form-control" placeholder="Mensaje" row="4" required></textarea>
<span class="texto-asterisco">Las celdas marcadas con * son obligatorias.</span>
<br>
<div id="button-container">
<button type="submit" id="button" disabled="disabled">Submit</button>
</div>
</form>

showing form result in popup window

how to show the result of First name and email in popup window.open.
example :
Congratulations!
Name :
EMail :
function validateForm()
{
var ufname=document.forms["regform"]["fname"].value;
var uemail=document.forms["regform"]["email"].value;
if (ufname=="" || uemail=="")
{
alert("PLEASE ENTER THE VALUES!");
return false;
}
}
<form method="post" name="regform" id="regform" onsubmit="return validateForm()">
<label>First name </label>
<input type="text" name="fname" id="fname" placeholder="Your Name">
<label>Email Address </label>
<input type="text" name="email" id="email" placeholder="hi#domain.com">
<button type="submit" value="submit">Register</button> <input type="reset" value="Reset">
</form>

If you want to do with new window try this by using window.open
function validateForm()
{
var ufname=document.forms["regform"]["fname"].value;
var uemail=document.forms["regform"]["email"].value;
if (ufname=="" || uemail=="")
{
alert("PLEASE ENTER THE VALUES!");
return false;
}
else
{
var myWindow = window.open("", "RegisterWindow", "width=200,height=100");
myWindow.document.write("<p>Congratulations! </p> <p>Name : "+ufname+".</p><p>EMail : "+ uemail +".");
}
}
<form method="post" name="regform" id="regform" onsubmit="return validateForm()">
<label>First name </label>
<input type="text" name="fname" id="fname" placeholder="Your Name">
<label>Email Address </label>
<input type="text" name="email" id="email" placeholder="hi#domain.com">
<button type="submit" value="submit">Register</button> <input type="reset" value="Reset">
</form>

try
function validateForm()
{
var ufname=document.forms["regform"]["fname"].value;
var uemail=document.forms["regform"]["email"].value;
if (ufname=="" || uemail=="")
{
alert("PLEASE ENTER THE VALUES!");
return false;
} else {
var popupWindow = window.open('');
popupWindow.document.body.innerHTML = '<div>Your Name: '+ufname+'</div><div>Your Email: '+uemail+'</div>'
}
}

form onSubmit doesn't call javascript function

I have checked recent blogs about onsubmit event not triggering the method. Those suggestions were not helpful for this problem.And i've tried this method and form in an another html page which didn't work either.So i am not able to find out where main problem is ?
My code :
<div id="_div2">
<center>
<div class="contianer">
<script type="text/javascript">
function formValidation ()
{
var fName =document.Log.firstName.value;
var lName =document.Log.lastName.value;
var pName =document.Log.penName.value;
var email =document.Log.email.value;
var password=document.Log.password.value;
var confirmPassword=document.Log.confirmPassword.value;
var status=false;
if(fName.length<1)
{
document.getElementById("firstNameLoc").innerHTML=
"<img src='Resource/unchecked.gif'/>Please Enter your First Name";
status=false;
}
else
{
document.getElementById("firstNameLoc").innerHTML=
"<img src="Resource/checked.png"/>Please Enter your First Name";
status=true;
}
return status;
}
</script>
<form name="Log" action="SignUpInsert.php" method="post" onsubmit="return formValidation();return false;">
<label><b>First Name</b></label><span id="firstNameLoc"></span><br>
<input type="text" placeholder="Enter your Last Name" name="firstName"><br>
<label><b>Last Name</b></label><span id="lastNameLoc"></span><br>
<input type="text" placeholder="Enter your Last Name" name="lastName"><br>
<label><b>Pen Name</b></label><span id="penNameLoc"></span><br>
<input type="text" placeholder="Enter your Unique Pen Name" name="penName"><br>
<label><b>Email</b></label><span id="emailLoc"></span><br>
<input type="text" placeholder="Enter your Email" name="email"><br>
<label><b>Password</b></label><span id="passwordLoc"></span><br>
<input type="password" placeholder="Enter your Password" name="password"><br>
<label><b>Confirm Password</b></label><span id="confirmPasswordLoc"></span><br>
<input type="password" placeholder="Enter your Password Again" name="confirmPassword"><br>
<input type="submit" title="Done?" value="Sign Up"><br>
<div class ="contianer">
<button type="button" class="cancelBtn" title="Go Back" onclick="location.href='Main.html'">Cancel</button>
</div>
</form>
</div>
</center>

you almost done. simple quotes problem.you could change like this in your dom else statement
document.getElementById("firstNameLoc").innerHTML = '<img src="Resource/checked.png"/>Please Enter your First Name';
function formValidation() {
var fName = document.Log.firstName.value;
var lName = document.Log.lastName.value;
var pName = document.Log.penName.value;
var email = document.Log.email.value;
var password = document.Log.password.value;
var confirmPassword = document.Log.confirmPassword.value;
var status = false;
if (fName.length < 1) {
document.getElementById("firstNameLoc").innerHTML =
"<img src='Resource/unchecked.gif'/>Please Enter your First Name";
status = false;
} else {
document.getElementById("firstNameLoc").innerHTML = '<img src="Resource/checked.png"/>Done..!';
status = true;
}
return status;
}
<div id="_div2">
<center>
<div class="contianer">
<form name="Log" action="SignUpInsert.php" method="post" onsubmit="return formValidation();return false;">
<label><b>First Name</b></label><span id="firstNameLoc"></span><br>
<input type="text" placeholder="Enter your Last Name" name="firstName"><br>
<label><b>Last Name</b></label><span id="lastNameLoc"></span><br>
<input type="text" placeholder="Enter your Last Name" name="lastName"><br>
<label><b>Pen Name</b></label><span id="penNameLoc"></span><br>
<input type="text" placeholder="Enter your Unique Pen Name" name="penName"><br>
<label><b>Email</b></label><span id="emailLoc"></span><br>
<input type="text" placeholder="Enter your Email" name="email"><br>
<label><b>Password</b></label><span id="passwordLoc"></span><br>
<input type="password" placeholder="Enter your Password" name="password"><br>
<label><b>Confirm Password</b></label><span id="confirmPasswordLoc"></span><br>
<input type="password" placeholder="Enter your Password Again" name="confirmPassword"><br>
<input type="submit" title="Done?" value="Sign Up"><br>
<div class="contianer">
<button type="button" class="cancelBtn" title="Go Back" onclick="location.href='Main.html'">Cancel</button>
</div>
</form>
</div>
</center>

Prepending only if the div isn't showing?

Basically, I want to prepend a div only if the div I'm prepending isn't already showing.
$(".loginForm").submit(function() {
var username = $("input.username").val();
var password = $("input.password").val();
var errorvisible = $("body").has(".alert.error");
if (!username || !password && errorvisible == false) {
$('body').prepend("<div class=\"error alert\">One or more field(s), have been left empty</div>");
setTimeout(function() {
$('.error.alert').fadeOut('1000', function() {
$('.error.alert').remove();
});
}, 6000);
event.preventDefault();
}
});
At the moment, I'm trying to make it so the jquery will only do the if empty if statement if the error isn't currently visible however it's not working...
<div class="pageCont">
<div class="title">
<h1>LetsChat</h1>
<h4>The new way of interaction.</h4>
</div>
<div class="login box">
<form method="POST" action="#" class="loginForm">
<input type="text" class="loginInput username" placeholder="Aquinas Email or Number" /><br>
<input type="password" class="loginInput password" placeholder="Password" /><br>
<div class="checkBox">
<input type="checkbox" id="checkBoxLink">
<label for="checkBoxLink">Remember Me</label>
Forgotten your password?
</div>
<input type="submit" value="Submit" class="login btn green" />
<input type="reset" value="Clear Fields" class="reset btn green" />
</form>
</div>
<div class="signup box">
<form method="POST" action="#" class="signupForm">
<input type="text" class="signupInput" placeholder="First Name" /><br>
<input type="text" class="signupInput" placeholder="Last Name" /><br>
<input type="text" class="signupInput" placeholder="Aquinas Email" /><br>
<input type="password" class="signupInput" placeholder="Password" /><br>
<input type="submit" class="purple btn signup" value="Sign Up Today!">
</form>
</div>
</div>

The below should work if I'm understanding your question correctly?
$(".loginForm").submit(function() {
var username = $("input.username").val();
var password = $("input.password").val();
var errorvisible = $("body").has(".alert.error").length;
if (!username || !password)
{
if(errorvisible == 0)
$('body').prepend("<div class=\"error alert\">One or more field(s), have been left empty</div>");
setTimeout(function() {
$('.error.alert').fadeOut('1000', function() {
$('.error.alert').remove();
});
}, 6000);
event.preventDefault();
}
});

I have used this type of code many times:
if(!$('#myFancyDiv').is(':visible')) {
//prepend or do whatever you want here
}
BTW just for clarity, this code checks if 'myFancyDiv' is not visible.

You can check whether the .error.alert elements exists, if so don't do anything else create a new one
$(".loginForm").submit(function() {
var username = $("input.username").val();
var password = $("input.password").val();
var errorvisible = $("body").has(".alert.error");
if (!username || !password && errorvisible == false) {
if (!$('.error.alert').length) {
$('body').prepend("<div class=\"error alert\">One or more field(s), have been left empty</div>");
setTimeout(function() {
$('.error.alert').fadeOut('1000', function() {
$(this).remove();
});
}, 6000);
}
event.preventDefault();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="#" class="loginForm">
<input type="text" class="loginInput username" placeholder="Aquinas Email or Number" />
<br>
<input type="password" class="loginInput password" placeholder="Password" />
<br>
<div class="checkBox">
<input type="checkbox" id="checkBoxLink">
<label for="checkBoxLink">Remember Me</label>
Forgotten your password?
</div>
<input type="submit" value="Submit" class="login btn green" />
<input type="reset" value="Clear Fields" class="reset btn green" />
</form>

Prevent elements from clearing after failed validation on nested .NET master page

The validation works perfectly, but if the validation fails, the form clears all data.
How can I validate the form without causing the user to have to re-enter all the data again? Due to the nature of the redirect, I need the html form to render exactly as it does now.
HTML:
<div class="formHalf">
<label for="first_name">
First Name*</label>
<input id="first_name" maxlength="40" name="first_name" size="20" type="text" class="text" />
</div>
<div class="formHalf">
<label for="last_name">
Last Name*</label>
<input id="last_name" maxlength="80" name="last_name" size="20" type="text" class="text" />
</div>
<div class="formWhole">
<label for="company">
Company</label>
<input id="company" maxlength="40" name="company" size="20" type="text" class="text" />
</div>
<div class="formWhole">
<label for="address">
Address</label>
<input id="address" maxlength="80" name="address" size="20" type="text" class="text" />
</div>
<div class="formHalf">
<label for="city">
City</label>
<input id="city" maxlength="40" name="city" size="20" type="text" class="text" />
</div>
<div class="formHalf">
<label for="state">
State/Province</label><input id="state" maxlength="20" name="state" size="20" type="text"
class="text" />
</div>
<div class="formHalf">
<label for="zip">
Zip</label><input id="zip" maxlength="20" name="zip" size="20" type="text" class="text" />
</div>
<div class="formHalf">
<label for="country">
Country</label><input id="country" maxlength="40" name="country" size="20" type="text"
class="text" />
</div>
<div class="formHalf">
<label for="email">
Email*</label><input id="email" maxlength="80" name="email" size="20" type="text"
class="text" />
</div>
<div class="formHalf">
<label for="phone">
Phone*</label><input id="phone" maxlength="40" name="phone" size="20" type="text"
class="text" />
</div>
<div class="formWhole">
<label for="description">
Description</label><textarea name="description"></textarea>
</div>
<div class="formWhole">
<input type="submit" name="formSubmit" id="formSubmit">
</div>
</div>`
SCRIPT:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#formSubmit").click(function () {
for (i = 0; i < 1; i++) {
var isValid = validateForm();
if (isValid) { }
$("form").attr("action", "https://www.other web site that redirects back to my page after logging form");
}
});
});
function validateForm() {
var message = "";var message2="";
var elements = new Array("first_name", "last_name", "phone", "email");
var userElement = new Array(" First Name", "Last Name", "Phone Number", "E-Mail Address");
for (i = 0; i < elements.length; i++)
{
var x = document.getElementById(elements[i]).value;
if (x == null || x == "") {
if (message != "")
message += ", "; message += userElement[i];
}
if (i == 3 && x != null && x != "") {
var atpos = x.indexOf("#");
var dotpos = x.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
message2 += "The email address is not valid.";
}
}
if (i == 2 && x != null && x != "") {
var checknumber = x.replace(/[^0-9]/g, '');
if (checknumber.length != 10 && checknumber.length != 11) {
message2 += "The phone number is needs to be in format 123-456-7890 or 1-234-567-8901.";
}
}
// email and phone validation
}
if (message != "" || message2 != "") {
if (message != "") {
message += " must be filled out.";
}
message += message2;
alert(message);
return false;
}
return true;
}
</script>`

The easiest way is just to catch the POST or GET value's on the server's side. When using PHP for example you can refill the First name by adding the following the corresponding input-tag:
value="<?=$_POST['first_name']?>"
You should change the POST tot GET if it's a get-action. Don't forget to additionally validate at the server's side.

if the extension of your page is aspx then add the runat="server" attribute to each data input tag and then you will have the data persisted !