I am trying to match two fields with the result in my javascript before the form gets submitted but not working.
I don't want the form to get submitted if the results don't match.
Please what is the solution? Thanks.
Code Below;
function Check(){
var done=0;
var check=document.check.phone.value;
var check=document.check.pcode.value;
if (phone=="08023" && pcode=="12345") {
alert ("Result Match!");
done=1;
return fasle;
}
if (done==0) {
alert("Result Don't Match!");
}
}
<form action=" " method="post">
<input name="phone" maxlength="11" type='tel' id="phone" placeholder="0000-000-0000" required="" />
<br/><br/>
<input name="pcode" maxlength="11" type='tel' id="pcode" placeholder="0000-000-0000" required="" />
<br/><br/>
<button class="button" onClick="javascript:Check()" name="Submit" type="submit" value="Login"><span>Log In </span></button>
</form>
You have several mistakes in your code, I have cleaned it up a bit for you.
function Check() {
var done = 0;
var phone = document.check.phone.value;
var pcode = document.check.pcode.value;
if (phone=="08023" && pcode=="12345") {
alert("Result Match!");
done = 1;
} else {
alert("Result Don't Match!");
}
}
<form name="check" action=" " method="post">
<input name="phone" maxlength="11" type='tel' id="phone" placeholder="0000-000-0000" required="" />
<br /><br />
<input name="pcode" maxlength="11" type='tel' id="pcode" placeholder="0000-000-0000" required="" />
<br /><br />
<button class="button" onClick="javascript:Check()" name="Submit" type="submit" value="Login">
<span>LogIn</span></button>
</form>
Related
I have a html signup form in which I want to check whether password and re-entered password are same or not in Javascript.
Here is the code :
< script >
function pass() {
var pas = document.getElementById("pass");
var rpas = document.getElementById("rpass");
if (pas.value != rpas.value) {
document.getElementById("error").innerHTML = "Enter same password in Retype Password..";
} else {
document.getElementById("error").innerHTML = "";
}
}
<
/script>
<form action="">
<div id="signup" class="tab-content show">
<input type="text" placeholder="Name" name="name" id="name" />
<br />
<br />
<input type="password" placeholder="Password" name="pass" id="pass" />
<br />
<br />
<input type="password" placeholder="ReType Password" name="rpass" id="rpass" />
<br />
<br />
<input type="email" placeholder="Email" name="email" id="email" />
<br />
<br />
<input type="radio" value="Male" name="gender" id="gender" checked="checked" />Male
<input type="radio" value="FeMale" name="gender" id="gender" />Female
<br />
<br />
<input type="submit" value="Submit" name="submit" id="submit" onclick="pass()" />
<p id="error"></p>
</div>
</form>
Problem is that Javascript is not working..
The problem is that you are submitting the form there. You have used onClick event on submit button, but when submit button is pressed form is submitted and you can call a function in the form tag in onSubmit attribute and then you have to stop form submission otherwise the form will be submitted and the page will reload
You need to change input type "submit" to input type="button".
<script >
function pass(){
var pas = document.getElementById("pass");
var rpas = document.getElementById("rpass");
if (pas.value != rpas.value){
document.getElementById("error").innerHTML="Enter same password in Retype Password..";
}
else{
document.getElementById("error").innerHTML="";
}
}
</script>
<form action="">
<div id="signup" class="tab-content show">
<input type="text" placeholder="Name" name="name" id="name" />
<br />
<br />
<input type="password" placeholder="Password" name="pass" id="pass" />
<br />
<br />
<input type="password" placeholder="ReType Password" name="rpass" id="rpass" />
<br />
<br />
<input type="email" placeholder="Email" name="email" id="email" />
<br />
<br />
<input type="radio" value="Male" name="gender" id="gender" checked="checked"/>Male
<input type="radio" value="FeMale" name="gender" id="gender" />Female
<br />
<br />
<input type="button" value="Submit" name="submit" id="submit" onclick="pass()" />
<p id="error"></p>
</div>
</form>
You can check below code on W3schools
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
Password:<br>
<input type="password" name="password" id="pswd">
<br><br>
Re-Password:<br>
<input type="password" name="password" id="rpswd">
<br><br>
<input type="button" value="Submit" onclick="pass()">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
<script>
function pass() {
var paswd = document.getElementById("pswd").value;
var rpswd = document.getElementById("rpswd").value;
alert(paswd !== rpswd);
}
</script>
</body>
</html>
Also you can follow the answer of whis san
folks.
I hope you don't see this as a silly question because i am new to JavaScript. I did my research on how to solve this problem but the answers i found on stack overflow were kind of too high for me right now. And i don't like to copy codes either. I want to learn it. My JavaScript code worked on one field but didn't work for all fields even when i did a loop.
Please you are free to show me how to do this professionally. I would be grateful to see many approaches or methods. Gracias
function Validate(x){
var required = document.getElementsByClassName("required");
for(var x = 0; x > required.length; x++){
if ((required[x].value == "") || (required[x].value == null)) {
required[x].style.backgroundColor = "red";
required[x].style.color = "white";
} else {
required[x].style.backgroundColor = "";
required[x].style.color = "#777";
}
}
}
<form id="form1" name="form1" method="post" action="">
<p>
<label for="textfield">Name</label><br />
<input type="text" name="name" id="name" class="forme required" onblur="Validate(name)" />
<br />
<label for="textfield">Surname</label><br />
<input type="text" name="surname" id="surname" class="forme required" />
<br />
<label for="textfield"> School</label><br />
<input type="text" name="school" id="school" class="forme required" />
<br />
<label for="textfield">Mobile</label><br />
<input type="text" name="mobile" id="mobile" class="forme required" />
<br />
<label for="email"> Email</label><br />
<input type="text" name="email" id="email" class="forme required"/>
</p>
<p>
<input type="reset" name="reset" id="reset" value="Reset" />
<input type="submit" onclick="Validate()" name="submit" id="submit" value="Submit" />
</p>
</form>
Be grateful for ya time.
as mentioned in the comments of your question, you used the wrong sign (">" ist false, "<" is true). But your code has some more failures.
The for attribute on the label elements should always point to the respective input field, so use the ID of the input field.
It's may better to use the JavaScript addEventListener method instead of the DHTML attribute onclick, but that is probably a matter of taste.
document.getElementById("submit").addEventListener("click", function(event){
var req = document.querySelectorAll("form input.required"),
error = false;
for(var i = 0; i < req.length; i++){
if(req[i].value.trim() == ""){
if(!error){
error = true;
}
req[i].style.setProperty("color", "#ffffff");
req[i].style.setProperty("background-color", "#ff0000");
} else {
req[i].style.removeProperty("color");
req[i].style.removeProperty("background-color");
}
}
if(error){
// Prevent Form Submit
event.preventDefault();
}
});
<form id="form1" name="form1" method="post" action="">
<p>
<label for="name">Name</label><br />
<input type="text" id="name" name="name" class="forme required" />
</p>
<p>
<label for="surname">Surame</label><br />
<input type="text" id="surname" name="surname" class="forme required" />
</p>
<p>
<label for="school"> School</label><br />
<input type="text" id="school" name="school" class="forme required" />
</p>
<p>
<label for="mobile">Mobile</label><br />
<input type="tel" id="mobile" name="mobile" class="forme required" />
</p>
<p>
<label for="email"> Email</label><br />
<input type="email" id="email" name="email" class="forme required" />
</p>
<p>
<input type="reset" id="reset" name="reset" value="Reset" />
<input type="submit" id="submit" name="submit" value="Submit" />
</p>
</form>
Please note: Don't use ONLY JavaScript to validate your form fields. You should always check the passed user informations on the server side too, because you can't control the user.
Have fun learning JavaScript.
Sincerely,
Sam.
I have a validator for phone no with js and it is working fine but eve after getting false as return the php code gets executed. how to stop it from executing.
This is my js function
function phonenumber(inputtxt){
var phoneno = /^\d{10}$/;
if(inputtxt.value.match(phoneno))
{return true;}
else
{alert("message");
return false;}
}
This is my html code
<form action="get_quote.php" method="post" name="quote" class="quote">
<font class="label"><input type="text" class="quote" placeholder="Enter Your Name" autocomplete="off" name="name" required/>
<input type="text" class="quote" autocomplete="off" placeholder="Enter Your Mobile Number" name="mobile" required/>
<input type="email" class="quote" autocomplete="off" placeholder="Enter Your Email Id" name="email" required/><br />
</center>
<div>
<div class="rest">
<input type="radio" id="new" name="condition" class="rest" checked>New<br />
<input type="radio" id="mod" name="condition" class="rest"/>Modification
</div>
<div class="rest">
<input type="checkbox" name="web" />Website<br />
<input type="checkbox" name="android" />Android Application<br />
<input type="checkbox" name="ios" />IOS Aplication<br />
<input type="checkbox" name="seo" />SEO/SMO<br />
<input type="checkbox" name="desktop" />Computer Software<br />
</div>
</div>
<br><center>
<textarea name="desc" placeholder="Enter Your Description" required></textarea><br /></font>
<button type="submit" onclick="phonenumber(document.quote.mobile)" class="quote">Get Quote</button>
</form>
Working Fiddle.
Add return in onclick before function call :
<button type="submit" onclick="return phonenumber(document.quote.mobile)" class="quote">Get Quote</button>
Hope this helps.
You can get mobile field value by using this:
function phonenumber()
{
var inputtxt = document.getElementsbyName("mobile");
var phoneno = /^\d{10}$/;
if(inputtxt.value.match(phoneno))
{
return true;
}
else
{
alert("message");
return false;
}
}
And than no need to pass param in onclick event, use this:
<button type="submit" onclick="phonenumber()" class="quote">Get Quote</button>
I can't manage to submit the form after it's validated. the validation code works- the "alert()" text comes up, though the form is not submitted.
I've tried many options but none of them worked, please help.
Thank you!
HTML:
<label for="name"> Name: </label>
<input class="inputfield" type="text" name="name" required placeholder="Full name" />
<br />
<label for="phone"> Phone Number: </label>
<input class="inputfield" type="text" id="phone" name="phone" required placeholder="Phone Number" />
<br />
<!-- <label for="email"> E-mail: </label>
<input class="inputfield" type="email" id="email" name="email" required placeholder="Email adress" />
<br /> -->
<label for="message"> Message: </label>
<textarea cols="50" rows="4" class="textarea" name="message" placeholder="Message"> </textarea>
<br />
<div id="error"></div>
<input class="submitform" type="submit" name="submit" value="Send" />
</form>
</div>
jQuery:
$("#validation").submit(function(event){
var errorMessage = "";
event.preventDefault();
if (!$.isNumeric($('#phone').val()) ) {
errorMessage="Please enter a Valid Phone";
}
if (errorMessage == "") {
alert("good")
} else {
$("#error").html(errorMessage);
}
});
Your call to event.preventDefault(); is preventing the submit. Try it like this:
$("#validation").submit(function(evt){
var errorMessage = "";
if (!$.isNumeric($('#phone').val()) ) {
errorMessage="Please enter a Valid Phone";
}
if (errorMessage == "") {
alert("good")
} else {
$("#error").html(errorMessage);
evt.preventDefault();
}
});
I have a simple form to take user input. User must fill very fields in that form. If they don't, javascript gives the alert message but it's not working. I am not getting alert message if I submit the form empty. Here's my form.html:
</style>
<script type="text/javascript">
function Validate(){
if(document.simple_form.session.value == "" ||
document.simple_form.hostname.value == "" ||
document.simple_form.username.value == ""
document.simple_form.password.value == "")
{
alert("Please fill out all fields before clicking Load!");
return false;
}
}
</script>
</head>
<body>
<form action="." method="post" onsubmit="return Validate();" name="simple_form">
{% csrf_token %}
<fieldset>
<legend>Session</legend>
<label for="input-one" class="float"><strong>Session Name:</strong></label><br />
<input class="inp-text" name="session" id="sess" type="text" size="30" /><br />
<label for="input-two" class="float"><strong>RemoteHost:</strong></label><br />
<input class="inp-text" name="hostname" id="host" type="text" size="30" onblur="if(this.value=='') { this.value='ngs.pradhi.com:/upload' }" onfocus="if(this.value=='ngs.pradhi.com:/upload') { this.value='' }" value="ngs.pradhi.com:/upload" />
<label for="input-three" class="float"><strong>Username:</strong></label><br />
<input class="inp-text" name="username" id="user" type="text" size="30" />
<label for="input-four" class="float"><strong>Password:</strong></label><br />
<input class="inp-text" name="password" id="pass" type="password" size="30" />
</fieldset>
<p><input class="submit-button" type="submit" value="Load" /></p>
<p><input class="save-button" type="reset" name="cancel" value="Cancel" /></p>
</form>
Is there something I am missing?
You're missing a final || in your Validate() function.
I've got a working jsfiddle here (I added a couple of </br>'s too).