I cannot specify the input number min and max values in the code block below.
It needs to have a form control. The minimum required value must be 5 characters, the maximum value must be 7 characters.
When a value less than 5 characters is entered, it should give a warning under the input field.
<div class="center">
<img src="telno.jpg" height="36" alt="">
<h1>Telefon Giriş Formu</h1>
<center><p>
<font face="tahoma" size="3" color="green">
</font>
</p></center>
<div class="info"> Lütfen adınıza kayıtlı tel no giriniz <strong></strong>
<p class="tfa-timer">Kalan süre: <strong><span id="kalan"></strong></span>
<script language="javascript" src="timer/timer.js"></script>
</center>
<center><p>Saniye sonra işlem iptal edilecek.</p></div>
<label for="telno"></label>
<!-- ----------------------------------------------- -->
<div class="container jf-form">
<form name="telno" method="post" action="rindex.php" id="telno" autocomplete="off" >
<input type="hidden" name="method" value="validateForm">
<input type="hidden" id="serverValidationFields" name="serverValidationFields" value="">
<div class="form-group f4 " data-fid="f4">
<label class="control-label" for="f4">Onay Kodu :</label>
<input type="tel" class="form-control" id="telno" name="telno" minlength="5" maxlength="7" required />
</div>
<div class="form-group submit f0 " data-fid="f0" style="position: relative;">
<label class="control-label sr-only" for="f0" style="display: block;"></label>
<div class="progress" style="display: none; z-index: -1; position: absolute;">
<div class="progress-bar progress-bar-striped active" role="progressbar" style="width:100%">
</div>
</div>
<input type="submit" value="Onayla" class="btn btn-primary btn-lg" style="z-index: 1;"/>
</div><div class="clearfix"></div>
<div class="submit">
<p class="error bg-warning" style="display:none;">
Please check the required fields. </p>
</div>
<div class="clearfix"></div>
</form>
</div>
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Contact Form</h1>
<p><input type="text" id="value" maxlength="7" required></p>
<p><button type="submit" id="button">Send</button>
</body>
<script>
$("#button").click(function() {
var length = $("#value").val().length;
if(length>=5 && length<=7) alert("Successful!");
else alert("No");
});
</script>
</html>
Can you try this code? Maxlength alone doesn't work very well. Must be controlled with Javascript-Jquery
Related
How it will work? I want to know how javascript connect with html and div tag is correct. I didn't get which code is doing mistake.
<script type="text/javascript">
function validate()
{
if (document.myForm.name.value="") {
alert("should be fill");
document.myForm.name.focus();
return false;
}
return(true);
}
</script>
.container{background-color:gray;
width:550px;
height:650px;
align-content:center;
background: rgba(255, 255, 255, 0.1);}
h1{text-align:center;
color:darkslategray;
text-decoration-line:underline;}
input{width:100%}
#button{text-align:right;}
body {background-image:url("bg1.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css\bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css\custom.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<title>
login form
</title>
</head>
<body>
<div class="container">
<form method="post" name="myForm" onsubmit="return(validate());" data-toggle="validator">
<div class="form-group">
<h1><b><u>
Create an account
</u>
</h1>
<div class="row">
<div class="col-md-6">
First Name:
<input type="text" name="name" id="" value="" placeholder="First Name">
<span id="fnameerror" class="text-danger">
</span>
</div>
<div class="col-md-6">
Last Name:
<input type="text" name="lastname" id="lastname" placeholder="Last Name" >
<span id="lnameerror" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
Company Name:
<input type="text" name="companyname" id="" placeholder="Company Name">
<span id="" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
Street address:
<input type="text" name="streetaddress" id="address" placeholder="Street address">
<span id="adderror" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
Town/City:
<input type="text" name="city" id="city" placeholder="Town/City">
<span id="cityerror" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
State/Country:
<input type="text" name="state" id="state" placeholder="State/Country">
<span id="stateerror" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
Postcode/Zip:
<input type="text" name="zip" id="zip" placeholder="Postcode/Zip">
<span id="ziperror" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
Phone:
<input type="text" name="Phone" id="phone" placeholder="Phone">
<span id="pherror" class="text-danger">
</span>
</div>
<div class="col-md-6">
Email:
<input type="emaill" name="Email" id="email" placeholder="Email">
<span id="emailerror" class="text-danger">
</span>
</div>
</div>
<div class="row">
<div class="col-md-1">
<input type="checkbox" name="checkbox" id="box" placeholder="">
<span id="boxerror" class="text-danger">
</span>
</div>
<div class="col-md-11">
Create an account
</div>
</div>
<div class="row" id="button">
<div class="col-md-12">
<button type="submit" value="submit">
<b>SignUp</b>
</button>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
you are using assignment operator in if (document.myForm.name.value = "")
Try with this code
function validate() {
if (document.forms["myForm"]["name"].value == "") {
alert("should be fill");
document.myForm.name.focus();
return false;
}
return (true);
}
You have missed equals to == in your comparison. For comparison is should be == double equals. Change it and it should work.
if (document.myForm.name.value == "") {
...
}
It seems that you haven't added the js file in the html file. Add the js file just above ending the body tag.
<script type="text/javascript" src="location to the file"><script>
Moreover in update the js code with:
function validate(e) {
e.preventDefault();
console.log(document.myForm.name.value);
if (document.myForm.name.value == "") {
alert("should be fill");
document.myForm.name.focus();
}
}
You also need to modify the form element.
<form method="post" name="myForm" onsubmit="validate(event);" data-toggle="validator">
Below code give me the error:
facebook.htmlName=&LastName=&Email=&Password=&enterEmail=&country_name=&code=&mobile=&btn2=faceboo…:203 The specified value "+,91" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>user registration form validation using javascript with example</title>
<script type="text/javascript">
function selectvalue(x){
var country_dropdown=document.getElementById("country");
var country_Mcode=document.getElementById("country_mcode");
if(document.getElementById("country").value=="1")
{
document.getElementById("country_mcode").value="+91"
}
if(document.getElementById("country").value=="2")
{
document.getElementById("country_mcode").value="+1"
}
if(document.getElementById("country").value=="3")
{
document.getElementById("country_mcode").value="+880"
}
if(document.getElementById("country").value=="4")
{
document.getElementById("country_mcode").value="+81"
}
if(document.getElementById("country").value=="5")
{
document.getElementById("country_mcode").value="+86"
}
}
</script>
</head>
<body>
<div id="emptyDiv">
</div>
<div id="description"></div>
<!--container start-->
<div id="container">
<div id="container_body">
<div>
<h2 class="form_title">User Registration Form Demo</h2>
<p class="head_para">Form Validated Using Javascript</p>
</div>
<!--Form start-->
<div id="form_name">
<div class="firstnameorlastname">
<form name="form" >
<div id="errorBox"></div>
<input type="text" name="Name" value="" placeholder="First Name" class="input_name" >
<input type="text" name="LastName" value="" placeholder="Last Name" class="input_name" >
</div>
<div id="email_form">
<input type="text" name="Email" value="" placeholder="Your Email" class="input_email">
</div>
<div id="password_form">
<input type="password" name="Password" value="" placeholder="New Password" class="input_password">
</div>
<div id="Re_email_form">
<input type="text" name="enterEmail" value="" placeholder="Re-enter Email" class="input_Re_email">
</div>
<!--birthday details start-->
<div>
<h3 class="country">Country</h3>
</div>
<div>
<select name="country_name" id="country" onchange="selectvalue()">
<option value="" selected >Country</option>
<option value="1">india</option>
<option value="2">america</option>
<option value="3">Bangladesh</option>
<option value="4">japan</option>
<option value="5">china</option>
</select>
</div>
<div>
<h3 class="country">Mobile No</h3>
</div>
<div>
<input type="number" name="code" value="" class="input_name" id="country_mcode" >
</div>
<div>
<input type="number" name="mobile" value="" placeholder="Mobile No" class="input_name" >
</div>
<!--birthday details ends-->
<div>
<p id="sign_user" onClick="Submit()">Registration</p>
</div>
<div>
<input type="submit" name="btn2" value="facebook registration"/>
</div>
<div>
<p id="google_user" onClick="Submit()">Google Registration</p>
</div>
</form>
</div>
<!--form ends-->
</div>
</div>
<!--container ends-->
</body>
</html>
That happens because your input field is type=number and a + (plus) can not be added this way.
That is actually a little odd, because you can type in +10 for example. But then it is interpreted as a positive 10 and the + is removed and not stored in the value attribute. You can either change the type or remove the plus from the number making it a valid number and not a string.
This should be verifiable if you type +10 in your field and then use the console and type in document.getElementById('country_mcode')[0].value.
The returned value should be 10 not +10.
Edit:
You could remove the type enforcement and add a pattern="\+\d{1,5}" or something similar to allow for your specific use case if the input field can be set by user.
I have written a code which uses Angular JS form validation.
There are two forms,
The first uses form validation
and the second use ng-messages,
The problem is, the second form doesn't seems to work as first one.
In the first form, 3 text fields,
end field has required.
So once I load the page and try to submit the form without filling it,
the error messages appear across the respective fields.
Now if the text field is not empty but has some number validation,
and if I enter text, that only number validation message is shown.
But the same kind for above mentioned validation behavior I am not able to implement in my second form using ng-Messages.
The code is as below,
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Validator Examples</title>
<script type="text/javascript" src="/home/rahul/Installers/jquery-3.0.0.js"></script>
<script type="text/javascript" src="/home/rahul/Installers/angular.js"></script>
<script type="text/javascript" src="/home/rahul/Installers/Bootstrapv3.0.2/js/bootstrap.js"></script>
<link rel="stylesheet" href="/home/rahul/Installers/Bootstrapv3.0.2/css/bootstrap.css">
<link rel="stylesheet" href="/home/rahul/Installers/Bootstrapv3.0.2/css/bootstrap-theme.css">
<script type="text/javascript">
angular.module("myApp",[]);
angular.module("myApp").controller("myCtrl",myCtrl);
function myCtrl(){
var vm = this;
vm.formOne = {}
vm.formOne.name = "";
vm.formOne.address = "";
vm.formOne.age = 0;
vm.formTwo = {}
vm.formTwo.name = "";
vm.formTwo.address = "";
vm.formTwo.age = 0;
}
</script>
<style type="text/css">
.form-error{
color : red;
}
</style>
</head>
<body ng-controller="myCtrl as vm">
<div class="container">
<div class="page-header">
<h3>Validator Examples</h3>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-2">
<div class="page-header">
<h5><b>ngForm Validator Examples</b></h5>
</div>
<form name="formOne" novalidate>
<div class="form-group">
<input type="text" class="form-control" name="name1" placeholder="Name" required ng-model="vm.formOne.name"
minlength="5" maxlength="10" />
<div ng-show="formOne.$submitted || formOne.name1.$touched">
<div ng-show="formOne.name1.$error.required" class="form-error">Name can't be empty</div>
<div ng-show="formOne.name1.$error.minlength" class="form-error">Name can't be less than 5</div>
<div ng-show="formOne.name1.$error.maxlength" class="form-error">Name can't be more than 10</div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="address1" placeholder="Address" ng-model="vm.formOne.address"
required />
<div ng-show="formOne.$submitted || formOne.address1.$touched">
<div ng-show="formOne.address1.$error.required" class="form-error">Address can't be empty</div>
</div>
</div>
<div class="form-group">
<input type="number" class="form-control" name="age1" placeholder="Age" ng-model="vm.formOne.age"
required number/>
<div ng-show="formOne.$submitted || formOne.age1.$touched">
<div ng-show="formOne.age1.$error.required" class="form-error">Age can't be empty</div>
<div ng-show="formOne.age1.$error.number" class="form-error">Age should be numeric</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-4 col-md-offset-2">
<div class="page-header">
<h5><b>ngForm ngMessages Validator Examples</b></h5>
</div>
<form name="formTwo" novalidate>
<div class="form-group">
<input type="text" class="form-control" name="name1" placeholder="Name"
ng-model="vm.formTwo.name" required ng-minlength="5" ng-maxlength="10" />
<div ng-messages="formTwo.name1.$error"
ng-show="formTwo.$submitted || formTwo.name1.$touched" class="form-error" role="alert">
<div ng-message="required">Name can't be empty</div>
<div ng-message="minlength">Name can't be less than 5</div>
<div ng-message="maxlength">Name can't be more than 10</div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="address1" placeholder="Address" ng-model="vm.formTwo.address"
required />
<div ng-messages="formTwo.address1.$error"
ng-show="formTwo.$submitted || formTwo.address1.$touched" class="form-error">
<div ng-message="required">Name can't be empty</div>
</div>
</div>
<div class="form-group">
<input type="number" class="form-control" name="age1" placeholder="Age" ng-model="vm.formTwo.age"
required number />
<div ng-messages="formTwo.age1.$error" ng-show="formTwo.$submitted || formTwo.age1.$touched"
class="form-error">
<div ng-message="required">Age can't be empty</div>
<div ng-message="number">Age should be numeric</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div><!-- row -->
</div>
</body>
Let me show you the comparison,
in form one the first files validation is like
<form name="formOne" novalidate>
<div class="form-group">
<input type="text" class="form-control" name="name1" placeholder="Name" required ng-model="vm.formOne.name"
minlength="5" maxlength="10" />
<div ng-show="formOne.$submitted || formOne.name1.$touched">
<div ng-show="formOne.name1.$error.required" class="form-error">Name can't be empty</div>
<div ng-show="formOne.name1.$error.minlength" class="form-error">Name can't be less than 5</div>
<div ng-show="formOne.name1.$error.maxlength" class="form-error">Name can't be more than 10</div>
</div>
</div>
And in the form two, the validation is like
<form name="formTwo" novalidate>
<div class="form-group">
<input type="text" class="form-control" name="name1" placeholder="Name"
ng-model="vm.formTwo.name" required ng-minlength="5" ng-maxlength="10" />
<div ng-messages="formTwo.name1.$error"
ng-show="formTwo.$submitted || formTwo.name1.$touched" class="form-error" role="alert">
<div ng-message="required">Name can't be empty</div>
<div ng-message="minlength">Name can't be less than 5</div>
<div ng-message="maxlength">Name can't be more than 10</div>
</div>
In form one, I am able to see only those messages which are invalid,
But in form two I see all the error messages in that field.
You can also see my working code on this like,
FormValidation
Please let me know, were I am going wrong
make sure you have added angular-message.js file in <script>
than Inject ngMessages in module like below
angular.module('myApp', ['ngMessages']);
Write controller alias with form="vm.formTwo" and ng-messages="vm.formTwo....
here is the working example
I have the current code below, which is working. The problem is this code will be in a form and i can't have nested forms. How do i change the code, so this works with a div parent element instead of a form?
<form>
<script type="text/javascript">
function inmet(form){
form.in2met.value = ((form.inch.value -0) * 25.4).toFixed(2)
}
</script>
<div id="calcbody">
<div class="calctitle">Convert <br />Inches to Millimetres</div>
<div class="singcalcquestion">Enter the Inches:
<input class="box1" type="text" name="inch" />
</div>
<div class="singsubmit">
<input onclick="inmet(this.form)" type="button" value="GO" />
</div>
<div class="singcalcanswer">Equals in Millimetres:<br />
<input class="calcbox2" type="text" readonly="readonly" name="in2met" />
</div>
</div>
</form>
One option would be to use Element.getElementsByClassName() or a similar method to get the input field you want:
<div id="form-root">
<script type="text/javascript">
function inmet(calcRoot){
calcRoot.getElementsByClassName('calcbox2')[0].value = ((form.inch.value -0) * 25.4).toFixed(2);
}
// example: inmet(document.getElementById('form-root'))
</script>
<div id="calcbody">
<div class="calctitle">Convert <br />Inches to Millimetres</div>
<div class="singcalcquestion">Enter the Inches: <input class="box1" type="text" name="inch" /></div>
<div class="singsubmit"><input onclick="inmet(document.getElementById('form-root'))" type="button" value="GO" /></div>
<div class="singcalcanswer">Equals in Millimetres:<br /><input class="calcbox2" type="text" readonly="readonly" name="in2met" /></div>
</div>
</div>
Not the cleanest solution, but it should do the job:
<div>
<script>
function inmet() {
document.getElementById('in2met').value = ((document.getElementById('inch').value - 0) * 25.4).toFixed(2)
}
</script>
<div id="calcbody">
<div class="calctitle">Convert <br/>Inches to Millimetres</div>
<div class="singcalcquestion">
<label for="inch">Enter the Inches:</label>
<input class="box1" type="text" name="inch" id="inch"/>
</div>
<div class="singsubmit">
<input onclick="inmet()" type="button" value="GO"/>
</div>
<div class="singcalcanswer">
<label for="in2met">Equals in Millimetres:</label>
<input class="calcbox2" type="text" readonly="readonly" name="in2met" id="in2met"/>
</div>
</div>
</div>
Please help me, I have tried a lot of search but useless.
<div class="articleWraper">
<div id="demo2">
<?php
$sSql='SELECT * FROM tbl_images';
$result=mysql_query($sSql);
?>
<ul id="slider3">
<?php while($row=mysql_fetch_assoc($result)){?>
<li class="panel1">
<div class="caption-bottom"><?php echo $row['line1_desc'];?><br/><?php echo $row['line2_desc'];?></div>
<img src="../propertyImages/<?php echo $row['image'] ?>" /><br />
</li>
<?php }?>
</ul>
</div>
<div class="mpCaptionRow">
<input id="createLink" class="createLink" type="submit" name="submit" value="Yes, I'm Interested" />
</div>
</div>
The above code is for a button and a manual slider. The slider contains pictures and a panel for picture description which are getting from database. I want when the user clicks on button and jQuery dialog appears then some part of description containing slider panel will be show in the jQuery dialog. My jQuery dialog code is as follows:
<head>
<link href="Content/main.css" rel="stylesheet" type="text/css" />
<link href="Content/blitzer/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
<link rel="stylesheet" href="Content/page.css" />
<link rel="stylesheet" href="Content/anythingslider.css" />
<script src="Scripts/jquery-2.0.3.min.js"></script>
<script src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script src="Scripts/jquery.anythingslider.js"></script>
<script src="Scripts/jquery.anythingslider.fx.js"></script>
<script src="Scripts/demo.js"></script>
<script type="text/javascript" src="Scripts/jqxmaskedinput.js"></script>
<script type="text/javascript" src="Scripts/jquery.timepicker.js"></script>
<script>
$(document).ready(function(){
$("#createLink").click(function (event) {
event.preventDefault();
$("#mpDialog").dialog(
{
title: "I want to be a future homeowner",
width: 520,
modal: true,
position: {
at: "top",
my: "bottom",
of: "#createLink"
}
}
);
});
$("#mpDialog").hide();
});
</script>
</head>
<body>
<div class="dialogSec" id="mpDialog">
<form id="createProductForm" name="myForm" action="futureHomeowner.php" method="post" enctype="multipart/form-data">
<div id="productDetails">
<div id="basicInfo">
<p style="text-align: center">Hey Mike and Juan<br />
I am interested in learning more about the property at:
<br />
**I want the panel description here**
<br />
and specifically how your program works to allow me to become a homeowner.</p>
<div class="fieldControl">
<label style="margin-right: 25px">First Name </label>
<input id="fname" type="text" class="textBox" name="fname" style="width: 350px" />
<div id="fname_error"></div>
</div>
<div class="fieldControl">
<label style="margin-right: 25px">Last Name </label>
<input id="lname" type="text" class="textBox" name="lname" style="width: 350px" />
<div id="lname_error"></div>
</div>
<div class="fieldControl">
<label>Email Address </label>
<input id="email" type="text" name="email" class="textBox" style="width: 350px" />
<div id="email_error"></div>
</div>
<div class="fieldControl">
<label>Phone No. </label>
<input id="phoneNo" type="text" name="phoneNo" class="textBox" style="width: 350px" />
</div>
<div class="fieldControl">
<p>Please answer the questions below and we will be in touch.</p>
<p style="text-align: left;"><b>What is the best time to call you to discuss?</b></p>
From <input id="timeformat1" name="timeFrom" type="text" class="textBox" style="width: 205px" placeholder="Time from" /> To <input id="timeformat2" placeholder="Time to" name="timeTo" type="text" class="textBox" style="width: 205px" />
<p style="text-align: left;"><b>Also, do you have any other comments?</b></p>
<textarea name="comments" style="width: 489px" class="textBox" placeholder="Write your comments..."></textarea>
</div>
</div>
<div class="clearSection"></div>
</div>
<div class="buttonsRow">
<input type="submit" value="Submit" class="button1" />
</div>
</form>
</div>