Use js for validation - javascript

I have a form with two buttons, the first buttons confirms the data entered and shows a verification code input, and the other one submits the code and the form, what i want is to put validations at the first button to required fields so he can't confirm unless he has filled all the required fields, how can i do that using js?
<form>
First name:<br>
<input type="text" name="firstname" required><br>
Last name:<br>
<input type="text" name="lastname" required><br>
<input type="button" value="Confirm"><br>
<input type="submit" value="Submit">
</form>

I think you are looking for something like this
function validate() {
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
if(fname==null || fname=="" || lname==null || lname=="") { // Validate the data here
alert("Please fill all the fields");
}
else {
alert("Data confirmed. Now you can submit.");
document.getElementById("submit").disabled = false;
}
}
<form>
First name:<br>
<input type="text" name="firstname" id="fname"><br>
Last name:<br>
<input type="text" name="lastname" id="lname"><br>
<input type="button" value="Confirm" onclick="validate()"><br>
<input type="submit" value="Submit" id="submit" disabled>
</form>

Use jQuery Validation:
<form id="UserForm">
First name:<br>
<input type="text" name="firstname" required><br>
Last name:<br>
<input type="text" name="lastname" required><br>
<input type="button" value="Confirm" onclick="Validate()"><br>
<input id="submitBtn" type="submit" value="Submit" disabled>
</form>
function Validate() {
var isValid = $("#UserForm").valid();
if (isValid)
$('#submitBtn').prop('disabled', false);
else
$('#submitBtn').prop('disabled', true);
}

You must'n't use JS for validation because you mustn't use client side for this validation. this is evil. Use PHP or a server side to be a litle more secure.

Related

JS function onclick is not working. It is not calling validations

Below is function and it is not working. Maybe some small bug in the code which I am unable to identify.
<!DOCTYPE html>
<script>
function check(){
firstname=document.getelementById("firstname").value;
lastname=document.getelementById("lastname").value;
if(lastname==""){
alert('please enter lastname');
}
}
</script>
<form action="" method="post" onSubmit="check();">
<input type="text" id="firstname" name="firstname" ><br>
<input type="text" id="lastname" name="lastname" ><br>
<input type="submit" value="submit">
</form>
</body>
</html>
The bug in the code: case sensitive getelEmentById. Please below code and test it
function check(){
firstname=document.getElementById("firstname").value;
lastname=document.getElementById("lastname").value;
if(lastname==""){
alert('please enter lastname');
}
}
GetElementById, element with a capital E
JavaScript is case sensive.
TIP: use developer options in your browser. They usualy give an error message.
<!DOCTYPE html>
<script>
function check(){
firstname=document.getElementById("firstname").value;
lastname=document.getElementById("lastname").value;
if(lastname==""){
alert('please enter lastname');
}
}
</script>
<form action="" method="post" onSubmit="check();">
<input type="text" id="firstname" name="firstname" ><br>
<input type="text" id="lastname" name="lastname" ><br>
<input type="submit" value="submit">
</form>
</body>
</html>

Javascript Check Form: Nothing happening

I am trying to make a js form validation check but for some reasons nothing is happening when im writing the function here's the code so when my email value is "" its supposed to display the alert message but its not displaying:
<form onsubmit="checkForm()" method="post">
<input class="test" type="text" minlength="1" maxlength="10" name="firstname" placeholder="➡️ Write Your First
Name"></input>
<input class="test" type="text" name="lastname" placeholder="😊 Write your Last Name"></input>
<input class="test" id="email" type="email" name="email" placeholder="✉️ Write your Best Email"></input>
<!--<textarea class="test" type="text" name="comment" placeholder="Tell us more about yourself"></textarea>-->
<script>
function checkForm(form) {
const getEmailValue = document.getElementById(email);
if (getEmailValue === "") {
alert('you need to fullfill');
}
}
</script>
<div id="buttoncenter">
<button type="submit" class="button">SUBMIT</button>
You need to quote the argument to getElementById, and get the value property.
The validation function should also return false when the form shouldn't be submitted, and you need to use a return statement in onsubmit so that this will be used.
function checkForm(form) {
const getEmailValue = document.getElementById('email').value;
if (getEmailValue === "") {
alert('you need to fullfill');
return false;
}
}
<form onsubmit="return checkForm()" method="post">
<input class="test" type="text" minlength="1" maxlength="10" name="firstname" placeholder="➡️ Write Your First
Name"></input>
<input class="test" type="text" name="lastname" placeholder="😊 Write your Last Name"></input>
<input class="test" id="email" type="email" name="email" placeholder="✉️ Write your Best Email"></input>
<input type="submit">
</form>

multiple textbox validation using either javascript or angular 1

I have three textboxes and a submit button. Need to enable submit button only when there is text in any of the 3 textboxes or else the button needs to be disbaled. What would be the code in angular1 or javascript to achieve this validation? Below is my code
First name:
<br>
<input type="text" id="textsend1" name="firstname1" value="Mickey">
<br>
Last name:<br>
<input type="text" id="textsend2" name="lastname" value="Mouse">
<br>
<br>
<input type="text" id="textsend3" name="firstname" value="Mickey">
<br>
<br>
<input type="submit" value="Submit" ng-disabled>
Try to add a class to enable or disable de button, check this url or just use ng-disabled
You can use a form and ng-required to accomplish this. With 3 textboxes it's manageable, but if you start to get more it can get a bit messy.
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.firstname = '';
$scope.middlename = '';
$scope.lastname = '';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<form name="myForm">
First name:<br>
<input type="text"
name="firstname"
ng-model="firstname"
ng-required="!middlename && !lastname"><br>
Middle name:<br>
<input type="text"
name="middlename"
ng-model="middlename"
ng-required="!firstname && !lastname"><br>
Last name:<br>
<input type="text"
name="lastname"
ng-model="lastname"
ng-required="!firstname && !middlename"><br><br>
<input type="submit"
value="Submit"
ng-disabled="myForm.$invalid">
</form>
</div>

How to increment and show the number of form after submit

I want to increment the form number once the user had submitted the form successfully. Is there any way to increment it through JavaScript or jQuery.
<form action="">
form no:1<br>
First name:<br>
<input type="text" name="firstname" value ="">
<br>
Last name:<br>
<input type="text" name="lastname">
<button type="submit" onclick="">Submit</button>
</form>
I would suggest something like this:
$(function () {
$("form").submit(function () {
$.post("url", $(this).serialize(), function () {
$("#count").text(parseInt($("#count").text() + 1);
});
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
form no: <span id="count">1</span><br>
First name:<br>
<input type="text" name="firstname" value ="">
<br>
Last name:<br>
<input type="text" name="lastname">
<button type="submit" onclick="increment();">Submit</button>
</form>

When you disable button[type=submit], is it possible to trigger a submit event?

For instance by hitting return while in an input field?
No, it's not. try the sample here: https://jsfiddle.net/tun8js68/
<form action="http://www.w3schools.com/html/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit" disabled>
</form>
You still can submit form with javascript.

Categories

Resources