Develop Reference

Form Validation in JavaScript-html

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.

how to disable the button based on result of javascript function

I want to disable the button based on the javascript result of textboxes if there is incorrect email id then the button should be disabled .Help me over this.If there is incorrect email and phone no ,I Want to disable my Button function or button.My problem is I'm using separate javascript functions for textboxes so how can disable the button based on other javascript function.Help me over this
<div align="right">
</div>
<div id="div">
<center> <h3>REGISTER</h3></center>
<div id="output" align="center">
</div>
<table>
<thead>
</thead>
<tbody>
<tr>
<td>
<label>Firstname</label>
<td>
<input type="text" name="firstname" id="firstname" required="">
</td>
</tr>
<tr>
<td>
<label>Lastname</label>
</td>
<td>
<input type="text" name="lastname" id="lastname" required="">
</td>
</tr>
<tr>
<td>
<label>Email</label>
</td>
<td>
<input type="text" name="email" id="email" required="">
</td>
<td id="error" style="display:none;color:red">
invalidemail
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
<td>
<input type="password" name="password" id="password" required="">
</td>
</tr>
<tr>
<td>
<label>Confirm password</label>
</td>
<td>
<input type="password" name="confirmpassword" id="confirmpassword" required="">
</td>
<span id="pass"></span>
</tr>
<tr>
<td>
<label>Phone no</label>
</td>
<td>
<input type="text" name="phoneno" pattern="[789][0-9]{9}" id="phoneno" required="" maxlength="10">
</td>
<td id="invalidphone" style="display:none;color:red">
invalidphoneno
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" name="submit" value="submit" id="submit"/>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
Login?
</td>
</tr>
</tbody>
</table>
</div>
</body>
</head>
</html>
<script type="text/javascript">
$('#email').on('keypress', function() {
var re = /([A-Z0-9a-z_-][^#])+?#[^$#<>?]+?\.[\w]{2,4}/.test(this.value);
if(!re) {
$('#error').show();
} else {
$('#error').hide();
}
});
$('#phoneno').on('keypress',function(){
var phone=/^\+{0,2}([\-\. ])?(\(?\d{0,3}\))?([\-\. ])?\(?\d{0,3}\)?([\-\. ])?\d{3}([\-\. ])?\d{4}/.test(this.value);
if(!phone){
$('#invalidphone').show();
}
else
{
$('#invalidphone').hide();
}
});
$(document).ready(function(){
$('#submit').click(function(){
var first=$('#firstname').val();
var last=$('#lastname').val();
var Email=$('#email').val();
var pass=$('#password').val();
var confirm=$('#confirmpassword').val();
var phone=$('#phoneno').val();
$.ajax({
type:"POST",
url:"register.php",
data:{
firstname:first,
lastname:last,
email:Email,
password:pass,
confirmpassword:confirm,
phoneno:phone,
},
success:function(data){
if($.trim(data)==='successfully registered')
{
$('#output').html(data);
}
else
{
$('#pass').html(data);
}
},
error:function()
{
alert("error");
}
});
});
});
</script>

Have submit button disabled initially till you have all form
elements as proper
With the HTML5 input (email and text) fields, you already have the required attribute present, but need to put required="required"
Have an onChange event for the last (required) field, check if the
validation is successful.
Check this for more details and additional info
If input field is empty, disable submit button

Use $("#submit").attr("disabled", true); to disable and $("#submit").removeAttr("disabled"); to enable the button
$('#phoneno').on('keypress',function(){
var phone=/^\+{0,2}([\-\. ])?(\(?\d{0,3}\))?([\-\. ])?\(?\d{0,3}\)?([\-\. ])?\d{3}([\-\. ])?\d{4}/.test(this.value);
if(!phone){
$("#submit").attr("disabled", true); // disable submit btn
$('#invalidphone').show();
}
else
{
$("#submit").removeAttr("disabled"); //enable submit btn
$('#invalidphone').hide();
}
});

Simply disable the button at the top of your javascript.
$("#submit").prop("disabled", true);
Then in your regex, if it's true, set it to false.
EDIT - It's probably best to set your regex variables global and then you can do if statement for both regex.
if (re && phone) {
$("#submit").prop("disabled", false);
}

JavaScript: Form not validated with OnSubmit

I am new bee to JavaScript. I have a form which is not validated with alert button. I am having a form which is to be submitted without errors. If I submit the forms with the empty fields, an alert message should be popped up.
The following is my code:
function validate_Form() {
alert('hi how');
exit;
var tokenNo = document.forms["myForm"]["txt1"].tokenNo;
if (tokenNo == null || tokenNo == "") {
alert("Enter The Token No");
return false;
} else {
document.write("pola");
}
}
<table>
<form name="Sec_guard_form" onsubmit="validate_Form()">
<tr>
<td>Token No</td>
<td>
<input type="text" value="" name="token_no" />
</td>
</tr>
<tr>
<td>Other Property</td>
<td>
<input type="text" value="" name="other_prop" />
</td>
</tr>
<tr>
<td>Bike Number</td>
<td>
<input type="text" value="" name="bike_no" />
</td>
</tr>
<tr>
<td>bike name</td>
<td>
<input type="text" value="" name="bike_nm" />
</td>
</tr>
<tr>
<td>bike model</td>
<td>
<select option="bike model">
<option value="Activa 3G">Activa 3G</option>
<option value="shine">shine</option>
<option value="unicon">unicon</option>
<option value="yuga">yuga</option>
<option value="neo">neo</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit" />
</td>
<td>
<input type="submit" value="cancel" />
</td>
</tr>
</form>
</table>
The above is my code, for i am using the mozilla firefox as my browser. Is that an issue. My function inside the script is not even called. what am i wrong here...

You can change your javascript like this :
function validate_Form() {
var form = document.querySelector("form");
var tokenNo = form.elements.token_no.value;
if (tokenNo == null || tokenNo == "") {
alert("Enter The Token No");
return false;
} else {
document.write("pola");
}
return false;
}
and your html like this:
<form name="Sec_guard_form" onsubmit="return validate_Form()">
exit; doesn't mean anything in javascript. You have to use return. So if you return before the function does anything then it is not useful at all!
The syntax you used for selecting form element and getting its value was wrong according to me so I corrected the syntax...
Also, you might be wondering why to use return validate_form() in HTML and return false in the function. It is used just for stopping the page to refresh/redirect before the entire function gets executed!
Try this code, it worked for me... I don't know what hi how was for so I eliminated it.

You are not calling function on your submit button Please use this to call function first.
<input type="submit" value="submit" onclick="validate_Form()" />

change
<form name="Sec_guard_form" onsubmit="validate_Form()">
to
<form name="Sec_guard_form" onsubmit="return validate_Form()">

Complete html code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table>
<form id="Sec_guard_form" onsubmit="return validate_Form();" method="post">
<tr>
<td>Token No</td>
<td>
<input type="text" value="" name="token_no" />
</td>
</tr>
<tr>
<td>Other Property</td>
<td>
<input type="text" value="" name="other_prop" />
</td>
</tr>
<tr>
<td>Bike Number</td>
<td>
<input type="text" value="" name="bike_no" />
</td>
</tr>
<tr>
<td>bike name</td>
<td>
<input type="text" value="" name="bike_nm" />
</td>
</tr>
<tr>
<td>bike model</td>
<td>
<select option="bike model">
<option value="Activa 3G">Activa 3G</option>
<option value="shine">shine</option>
<option value="unicon">unicon</option>
<option value="yuga">yuga</option>
<option value="neo">neo</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit" />
</td>
<td>
<input type="submit" value="cancel" />
</td>
</tr>
</form>
</table>
<script>
function validate_Form()
{ alert('hi how');
var tokenNo = document.getElementById("Sec_guard_form")["token_no"].value;
if (tokenNo == null || tokenNo == "")
{
alert("Enter The Token No");
return false;
}
else
{
document.write("pola");
}
}
</script>
</body>
</html>
This is working fine

Javascript Validating username Length

I am trying to validate my username field and check if the username contains atleast 6 letters, if not then i show a pop up window indicating the same.
But the alert command does not seem to work.
Following is the code:
<html>
<head>
<title> Webpage </title>
</head>
<script language="Javascript">
function validate()
{
if (username1.length < 6)
{
alert("Username must be atleast 6 charactrs long, Please Try Again");
}
}
</script>
<body>
<form>
<center>
<fieldset>
<table cellspacin="5" cellpadding="5" border="0">
<tr>
<td>Username: </td>
<td align="left"><input type=="text" name="username1" maxlength="20" size="20">
</td>
</tr>
<tr>
<td> Password: </td>
<td align = "left"> <input type="text" name="password" maxlength="20" size="20">
</td>
</tr>
<tr>
<td> Please confirm your password: </td>
<td align = "left"> <input type="text" name="password1" maxlength="20" size="20">
</td>
</tr>
<tr>
<td align="center"><input type="submit" value="Log in" onClick="validate()">
</td>
</tr>
</fieldset>
</table>
</center>
</form>
</body>
</html>

You are trying to use the name element attribute as the id, which creates a global window property. Name does not do that however, you can use.
You also aren't getting the value, you are trying to get the length on the element.
document.getElementsByName('username1')[0].value

Answer:
I tried it this way it worked:
<html>
<head>
<title> Webpage </title>
</head>
<script language="Javascript">
function validate()
{
username2 =form1.username1.value
if (username2.length < 6)
{
alert("Username must be atleast 6 charactrs long, Please Try Again");
}
}
</script>
<body>
<form name="form1">
<center>
<fieldset>
<table cellspacin="5" cellpadding="5" border="0">
<tr>
<td>Username: </td>
<td align="left"><input type=="text" name="username1" maxlength="20" size="20">
</td>
</tr>
<tr>
<td> Password: </td>
<td align = "left"> <input type="text" name="password" maxlength="20" size="20">
</td>
</tr>
<tr>
<td> Please confirm your password: </td>
<td align = "left"> <input type="text" name="password1" maxlength="20" size="20">
</td>
</tr>
<tr>
<td align="center"><input type="submit" value="Log in" onClick="validate()">
</td>
</tr>
</fieldset>
</table>
</center>
</form>
</body>
</html>

when i search name using button click event and http_get in angualar js my form data is auto post

js: this is my angular js code ,my angular js code is successfully running but my form value is auto post when button event click.
$scope.toggle = function() {
if ($scope.id_value != null && $scope.id_value != '') {
$scope.loading = true;
var url = 'http://127.0.0.1:78/Attendence_App/home/get_data/' + $scope.id_value;
var result = $http.get(url);
result.success(function(response) {
$scope.name_value = response;
$scope.val_show = false;
$scope.loading = false;
});
result.error(function(data, status, headers, config) {
alert(data);
$scope.loading = false;
});
} else {
alert("ID can not be empty");
$scope.val_show = true;
}
};
this is my html code :
<form action="<?php echo base_url();?>home/post_value" method="POST">
<table class="table table-hover table-responsive">
<tr>
<td>Date</td>
<td colspan="2"> <input type="text" class="form-control" id="date" /></td>
</tr>
<tr>
<td>ID</td>
<td><input type="text" class="form-control" ng-model="id_value" id="id" /></td>
<td><button class="btn btn-primary btn-sm" ng-click="toggle()">Search</button></td>
</tr>
<tr ng-show="loading">
<td>
</td>
<td colspan="2">
<div class=""><img src="http://27.147.128.98/itopupprod3/Image/ajax-loader.GIF" id="loading" alt="loading" /></div>
</td>
</tr>
<tr ng-hide="val_show">
<td>
Name
</td>
<td colspan="2">
<div>
<label id="name" ng-bind="name_value"></label>
</div>
</td>
</tr>
<tr>
<td>Attendance Type </td>
<td colspan="2">
<label>
<input type="radio" name="optionsRadios" value="Yes">
Yes
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="No">
No
</label>
</td>
</tr>
<tr>
<td>
Login Time
</td>
<td colspan="2">
<input type="text" class="form-control" />
</td>
</tr>
<tr>
<td>
Logout Time
</td>
<td colspan="2">
<input type="text" class="form-control" />
</td>
</tr>
<tr>
<td></td>
<td class="text-align" colspan="2">
<input type="submit" value="Submit Info " class="btn btn-success btn-lg" />
</td>
</tr>
</table>
</form>
my form data is auto post when search button click,please give me some suggestion

If I understand you right, You have to use ng-submit (while submit is your submit function):
<form ng-submit="submit()" ng-controller="ExampleController">
..... fields, labels, yada yada yada...
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
</form>
for more information, go to https://docs.angularjs.org/api/ng/directive/ngSubmit