I have created a form in which I want that if there are some specific entries, the form should not get submitted, and some functions should be executed. But for every other entry, the form should get submitted and work as normal.
function checkuser() {
let name = document.forms[0].name.value;
let email = document.forms[0].email.value;
let message = document.forms[0].message.value;
if ((name == "admin") && (email == "admin#admin.com") && message == ("admin")) {
alert("hey"); //SOME FUNCTION
} else {
document.forms[0].setAttribute("action", "login.php");
document.forms[0].setAttribute("onsubmit", " ");
document.forms[0].submit();
}
}
<form method="post" onsubmit="event.preventDefault(); return checkuser(this)" id="form">
<table align="center">
<tr>
<th><label for="name"> Name : </label></th>
<td> <input type="text" height=100px id="name" name="name" placeholder="Enter your Name..." required> </td>
</tr>
<tr>
<th><label for="email"> Email : </label> </th>
<td><input type="email" id="email" name="email" placeholder="Enter your Email ID..." required></td>
</tr>
<tr>
<th><label for="phone"> Phone Number : </label> </th>
<td><input type="tel" id="phone" name="phone" placeholder="Enter your Phone no..." pattern="[0-9]{10}"></td>
</tr>
<tr>
<th><label for="message"> Message : </label> </th>
<td><textarea id="message" name="message" placeholder="Enter Message..." required></textarea></td>
</tr>
</table>
<div class="buttons">
<input type="submit" value="Submit" name="submit">
<input type="reset" value="Reset" name="reset">
</div>
</form>
It works just fine, but the problem is just that, for normal values, I have to press SUBMIT button twice to redirect the form to "login.php" and submit it. I think, when I press it once, it removes the "submit" method and adds the "action" to the form, and on pressing it twice, it is submitted.
I need it to work with just one click. If I input special values, it should execute the following function, and for normal values, it should directly submit the form using "login.php" as an action.
Any help would be appreciated.
I did it like this...
function checkuser() {
let name = document.forms[0].name.value;
let email = document.forms[0].email.value;
let message = document.forms[0].message.value;
if ((name == "admin") && (email == "admin#admin.com") && message == ("admin")) {
alert("hey"); //SOME FUNCTION
} else {
document.forms[0].submit();
}
}
<form method="post" action="login.php" id="form">
<table align="center">
<tr>
<th><label for="name"> Name : </label></th>
<td> <input type="text" height=100px id="name" name="name" placeholder="Enter your Name..." required> </td>
</tr>
<tr>
<th><label for="email"> Email : </label> </th>
<td><input type="email" id="email" name="email" placeholder="Enter your Email ID..." required></td>
</tr>
<tr>
<th><label for="phone"> Phone Number : </label> </th>
<td><input type="tel" id="phone" name="phone" placeholder="Enter your Phone no..." pattern="[0-9]{10}"></td>
</tr>
<tr>
<th><label for="message"> Message : </label> </th>
<td><textarea id="message" name="message" placeholder="Enter Message..." required></textarea></td>
</tr>
</table>
<div class="buttons">
<input type="button" value="Submit" onclick="checkuser();">
<input type="reset" value="Reset" name="reset">
</div>
</form>
Related
I m new to JS, I have the below form I need javascript code to validate each field without clicking on submit button. Thanks in Advance
I m new to JS, I have the below form I need javascript code to validate each field without clicking on submit button. Thanks in Advance
<form action="" id = "form1"class = "form-group row">
<table class = "form-table">
<tr>
<td class = "col-sm-2 col-form-label">Name:</td>
<td><input type="text" class="form-control" id="name" placeholder="Name" value="" required="required" data-error="Please enter your full name.">
<div class="help-block with-errors"></div></td>
</tr>
<tr>
<td label for="email" class="col-sm-2 col-form-label" >Email:</td>
<td><input type="email" class="form-control" id="inputEmail3" placeholder="name#example.com" required="required">
</tr>
<tr>
<td label for="inputPhone3" class="col-sm-2 col-form-label">Phone:</td>
<td><input type="number" class="form-control" required="required" id="phone" placeholder="Phone"></td>
</tr>
<tr>
<td class = "sel1">Reason for Inquiry:</td>
<td><select class="form-control" required="required" id="sel1">
<option value="catering">Catering</option>
<option value="privateparty">Private party</option>
<option value="feedback">Feedback</option>
<option value="other">other</option>
</select>
</td>
</tr>
<tr>
<td class = "form-group">Additional Information:</td>
<td><textarea class="form-control" rows="5" id="comment"></textarea></td>
</tr>
<tr>
<td>Have you been to resturant:</td>
<td> <input type="radio" required="required" name="optradio"> Yes
<input type="radio" name="optradio"> No</td>
</tr>
<tr>
<td class = "form-check-input"> Best days to contact you:</td>
<td><input type="checkbox" required="required" name="m">M
<input class="form-check-input" type="checkbox" name="t">T
<input class="form-check-input" type="checkbox" type="checkbox" name="W">W
<input class="form-check-input" type="checkbox" type="checkbox" name="Th">Th
<input class="form-check-input" type="checkbox" type="checkbox" name="F">F</td>
</tr>
<tr>
<td></td>
<td><button class="btn btn-primary">Submit Request</button></td>
</tr>
</table>
</form>
You can use change event on your form to perform validation after any field changes with this script:
var form = document.forms.form1;
form.addEventListener('change', function() {
alert('Changed');
// Add your validation code here
});
Check the working example here
This is an example of very simple validation for name and e-mail fields, just to give you an idea how to implement it. We can add new element <div id="error-message" />, and use it to display found errors from the script:
var form = document.forms.form1;
form.addEventListener('change', function() {
document.querySelector('#error-message').innerHTML = '';
// Validate Name
const input_name = document.querySelector('#name').value;
if (input_name == "") {
document.querySelector('#error-message').innerHTML += "Name is missing<br>";
}
// Validate Email
const input_email = document.querySelector('#inputEmail3').value;
if (input_email == "") {
document.querySelector('#error-message').innerHTML += "Email is missing<br>";
}
});
Of course, you would need to implement better validation than this and decide how to display messages, but basic working example is here
i've built asimple webstie that contains three pages.i created a form in home page and something goes wrong with my javascript - i'm having a problem in setting a field right next to the input field with a rellevant message to the user telling him what he did wrong(prompt).
so i'm inputing below the honmePage (the form wich is in the body of the page -html) and the script its self wich includes a simple function.
My purpose is to check if user fills the field name and after that he delete it,so i want to display a red color message that tells the user that this field is requierd.
i'd be glad if someone can help me with that.
function validateName(){
var name=document.getElementById("fullName").value;
if (name.length == null)
{
nameRequiredPromt("Name Is Required",fullNamePrompt,"white");
return false;
}
}
function nameRequiredPromt(message,promtLocation,color){
document.getElementById(promtLocation).innerHTML=message;
document.getElementById(promtLocation).style.color=color;
}
<form id="form" style="color:white;">
<table>
<tr>
<td>
FullName :
</td>
<td>
<input type="text" placeholder="fullName" id="fullName"
onkeyup="validateName()" type="text"/> <label id="fullNamePrompt">aaaa
</label> <br>
</td>
</tr>
<tr>
<td>
E-mail :
</td>
<td>
<input type="email" placeholder="email" id="email"/><label
id="emailPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
New Password :
</td>
<td>
<input type="password" placeholder="password" id="newPassWord"/> <label
id="PasswordPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
Repeat Password :
</td>
<td>
<input type="password" placeholder="repeatedPassword"
id="repeatedPassWord"/> <label id="repeatedPassWordPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="submit" id="submit"/> <label
id="submitPrompt"> </label><br>
</td>
</tr>
</table>
</form>
i did some checks to be sure that the script works and it did work so i think my problem is in the decleration of the lable "id".
switch
name.length == null
to
!name.length
length will be zero not null
also fullNamePrompt appears undefined
try nameRequiredPromt("Name Is Required","fullNamePrompt","white");
Fixed: name.length == null and also fullNamePrompt undefined and color: white to red
function validateName(){
var name=document.getElementById("fullName").value;
if (!name.length)
{
nameRequiredPromt("Name Is Required","fullNamePrompt","red");
return false;
}
}
function nameRequiredPromt(message,promtLocation,color){
document.getElementById(promtLocation).innerHTML=message;
document.getElementById(promtLocation).style.color=color;
}
<form id="form" style="color:white;">
<table>
<tr>
<td>
FullName :
</td>
<td>
<input type="text" placeholder="fullName" id="fullName"
onkeyup="validateName()" type="text"/> <label id="fullNamePrompt">aaaa
</label> <br>
</td>
</tr>
<tr>
<td>
E-mail :
</td>
<td>
<input type="email" placeholder="email" id="email"/><label
id="emailPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
New Password :
</td>
<td>
<input type="password" placeholder="password" id="newPassWord"/> <label
id="PasswordPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
Repeat Password :
</td>
<td>
<input type="password" placeholder="repeatedPassword"
id="repeatedPassWord"/> <label id="repeatedPassWordPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="submit" id="submit" onclick="return validateName();"/> <label
id="submitPrompt"> </label><br>
</td>
</tr>
</table>
</form>
if (name && !name.length)
{
nameRequiredPromt("Name Is Required","fullNamePrompt","white");
return false;
}
first condition checks if name is null, second for checking if name.length is 0.
I need a message to pop up to tell the user that their enquiry has been submitted. The validation works, however I had to remove my old popup message as it was conflicting with the validation code. I need to know where to put the pop up message code in that exisiting javascript code that I am using to validate. The code i was using to make a pop up message was:
<script>
function EnquireButton() {
alert("Thank you for your enquiry!");
}
</script>
I'm sure it's simple enough, I have tried to implement it into the validation code, however it just reloads the page without showing the pop up.
HTML:
<form name="Contact_Us_Form" method="post" action="">
<table width="450px">
<p>One time Message</p>
<tr>
<td valign="top">
<label for="full_name">Full Name *</label>
</td>
<td valign="top">
<input type="text" name="full_name" maxlength="50" size="30" placeholder="First Name and Last Name" title="Your name here" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="landline">Landline Number *</label>
</td>
<td valign="top">
<input type="text" name="landline" maxlength="50" size="30" placeholder="(01206)" title=" YourLandline Number" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="Email">Email Adress *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30" placeholder="you#yourdomain.com" title="Your email" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="house_number">House Number *</label>
</td>
<td valign="top">
<input type="text" name="house_number" maxlength="30" size="30" placeholder="House Number" title="Your House Number" required/>
</td>
</tr>
<tr>
<td>
<label for="postal_code">Post Code *</label>
</td>
<td>
<input type="text" name="postal_code" maxlength="30" size="30" placeholder="CO5 " title="Your Postal Code" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="">Enquiry</label>
</td>
<td valign="top">
<textarea name="Enquiry" maxlength="1000" cols="28" rows="6" placeholder="Write your enquiry here."></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<button onclick="Enquirebutton()">Enquire</button>
<script>
$(document).ready(function (){
validate();
$('#full_name, #landline, #Email').change(validate);
});
function validate(){
if ($('#full_name').val().length > 0 &&
$('#landline').val().length > 0 &&
$('#Email').val().length > 0) {
$("input[type=Enquirebutton()]").prop("disabled", false);
}
else {
$("input[type=Enquirebutton()]").prop("disabled", true);
}
}
</script>
</td>
</tr>
</table>
</form>
Just add one property to form tag onsubmit="EnquireButton()"
that is
<form name="Contact_Us_Form" method="post" action="" onsubmit="EnquireButton()">
First, make your button a submit one:
<button type="submit">Enquire</button>
Then you can either use the onclick="Enquirebutton()" in your submit button or the onsubmit="Enquirebutton()" in your form.
Take a look at onsubmit Event for more information.
I have a simple form, I am trying to use javascript to validate the from but I cant get it to work and I am not sure what I am doing wrong. I am using the same code to validate a form on another project and that works but for some reason the code wont work with another form.
Here is the code
<head>
<script type="text/javascript">
function validate(){
if(document.contactForm.email.value===""){
alert("Please provide a valid email");
document.contactForm.email.focus();
return false;
}
}
</script>
</head>
<form name="contactForm" method="POST" id="contactForm" onsubmit="return(validate()">
<table>
<tr>
<td><input name="name" id="name" class="fields" type="text" placeholder="name"></td>
</tr>
<tr>
<td><input name="email" class="fields" type="email" placeholder="email"></td>
</tr>
<tr>
<td><input name="phone" class="fields" type="phone" placeholder="phone(optional)"></td>
</tr>
<tr>
<td><textarea name="message" class="fieldsMessage" name="message" placeholder="Message"></textarea></td>
</tr>
<tr>
<td><input class="submitButton" type="submit" name="submit" value="Submit"></td>
</tr>
</table>
</form>
you can use
<input type="email" name="email" required="required" />
html5 will automatic validate it for you.
or you can use this
$("document").ready();
function checkForm(formObj){
$("#table td>span").remove();
var msg="";
for (var i=0; i < formObj.elements.length; i++) {
// check if the form element has a validate attribute.
if (formObj.elements[i].name !=null &&
formObj.elements[i].getAttribute("validate")){
var validationRule =
eval(formObj.elements[i].getAttribute("validate"));
if (!validationRule.test(formObj.elements[i].value)||formObj.elements[i].value==""){
var obj = formObj.elements[i].parentNode;
// add a !!! mark on the validate field
if (obj.nodeName=="TD")
var dialog = formObj.elements[i].getAttribute("validateMsg")+"\n";
msg += dialog;
obj.innerHTML =
obj.innerHTML +"<span style='color:red; font-size:12px;' >"+ dialog +"</span>";
}//--> end test regExp
}//--> end if element has validate attribute
}// end loop through the form elements.
if (msg.length > 0){
return false;
}
else{
return true;
}
}//--> end function
html form:
<form method="post" onsubmit="return checkForm(this);" name="frm">
<table width="430px" id="table">
<tr>
<td>
<input type="text" name="name" validatemsg="please enter your name" validate="/^[a-zA-Z ]*$/" />
</td>
</tr>
<tr>
<td>
<input type="text" name="email" validatemsg="PLease enter email"
validate="/^([\w]+)(.[\w]+)*#([\w]+)(.[\w]{2,3}){1,2}$/" />
</td>
</tr>
<tr>
<td>
<input type="text" name="subject" validatemsg="plaese enter the subject" validate="/^[a-zA-Z1-9 ]*$/" />
</td>
</tr>
</table>
</form>
This line is your main issue...
<form name="contactForm" method="POST" id="contactForm" onsubmit="return(validate()">
should be
<form name="contactForm" method="POST" id="contactForm" onsubmit="return validate();">
Additionally, you may want to set email value to "" like this...
<input name="email" class="fields" type="email" placeholder="email" value="">
because validating email.value==="" might not return true otherwise
I am working on sign up form using html form , but i am facing problem my password cannot validate when I enter wrong password and enter write past does not show anything so what should i do any help.
function validate(){
var = pass(document.getElementById("pwd").value;
var = pas1(document.getElementById("cpwd").value;
if (pass==pas1)
{
}
else
{
alert("Try again");
}
}
</script>
</head>
<body>
<p class="style2 style8">SIGN UP FORM!!!!</p>
<form onclick="validate()" action="insert.php" method="post">
<table width="270" height="386" border="1" align="right" bordercolor="#993366" bgcolor="#CCCCCC"><td width="260"><table width="232" border="1">
<tr>
<td colspan="2"><span class="style2">loginform</span></td>
</tr>
<tr>
<td width="72"><span class="style5">Name</span></td>
<td width="144"><label>
<input name="name" type="text" id="name" onblur="MM_validateForm('name','','R');return document.MM_returnValue" placeholder="Name" />
</label></td>
</tr>
<tr>
<td width="72"><span class="style5">Gender</span></td>
<td><p>
<label>
<input type="radio" name="gender" value="Male" id="gender"/>
<span class="style5">Male</span></label>
<span class="style5" onfocus="MM_validateForm('fname','','R');return document.MM_returnValue"><br />
<label>
<input type="radio" name="gender" value="female" id="gender" />
female</label>
</span><br />
</p></td>
</tr>
<td width="72"><span class="style5">DOB</span></td>
<td width="144"><span id="sprytextfield1">
<label>
<input name="dob" type="text" id="dob" onblur="MM_validateForm('dob','','R');MM_validateForm('dob','','R');return document.MM_returnValue" placeholder="yyyy/mm/dd"/>
</label>
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td>
</tr>
<tr>
<td><span class="style5">Password</span></td>
<td><label>
<input name="pwd" type="password" id="pwd" onchange="MM_validateForm('pwd','','R');return document.MM_returnValue" placeholder="password"/>
</label></td>
</tr>
<tr>
<td width="72"><span class="style5">Confirm Password</span></td>
<td width="144"><label>
<input name="cpwd" type="password" id="cpwd" onchange="MM_validateForm('cpwd','','R');return document.MM_returnValue" placeholder="Confirm Password"/>
</label> </td>
</tr>
<tr>
<td colspan="2"><label>
<div align="center">
<input type="submit" name="submit" id="submit" value="Signup" />
</div>
</label></td>
</tr>
</table>
<label></label></td>
</tr>
</table>
</form>
<h1> </h1>
<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "date", {format:"yyyy/mm/dd"});
//-->
</script>
</body>
</html>
there is no pass in your content. You are writing it as:
var = pass(document.getElementById("pwd").value;
var = pas1(document.getElementById("cpwd").value;
Which should be this:
var pass = (document.getElementById("pwd").value;
var pas1 = (document.getElementById("cpwd").value;
Because the variable's name comes before the = sign. To show that this variable is having this value!
So, now lets use this one and try it like this:
if(pass==pas1) {
// save the password or whatever
} else {
// please try again..
}
This way, the user will check the inputs again. And it they are not working. Then you must first check that whether you are using correct ID of the element, or you are using ClassName as ID!
That's what the issue might be.
Well, for starters,
var = pass(document.getElementById("pwd").value;
var = pas1(document.getElementById("cpwd").value;
should be
var pass = document.getElementById("pwd").value;
var pas1 = document.getElementById("cpwd").value;
Edit:
Also, change onclick="validate()" to onclick="return validate();" and add return false; after the alert("Try again");.
Just small change in your code
function validate(){
var pass = document.getElementById("pwd").value;
var pas1 = document.getElementById("cpwd").value;
if (pass==pas1){
}
else{
alert("Try again");
return false;
}
}