jquery data input validation min and max in number
<td align='right'>
<label for="decimal"> <?php echo form_error('price') ?></label>
<input style="background-color:#FFFF42" type="text" class="form-control" name="price" id="price" placeholder="price" value="<?php echo $price; ?>" />
</td>
<script type="text/javascript">
$('#price').keyup(function(){
if ($(this).val() > 20 ){
alert("Price Max USD. 20");
$(this).val('20');
}
else if {
($(this).val() < 5 ){
alert("Price Min USD. 5");
$(this).val('5');
}
});
</script>
but this doesn't work there is no action
$(document).ready(function(){
$('#price').keyup(function(){
if ($(this).val() > 20 ){
alert("Price Max USD. 20");
$(this).val('20');
}
else if($(this).val() < 5 ){
alert("Price Min USD. 5");
$(this).val('5');
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td align='right'>
<label for="decimal"> <?php echo form_error('price') ?></label>
<input style="background-color:#FFFF42" type="text" class="form-control" name="price" id="price" placeholder="price" value="" />
</td>
Related
I want to fire my function Automatically when i complete my typing in ng-model.
I applied 2 different technique but nothing work
1. Approch
<div class="col-sm-6">
<input type="text" class="form-control" ng-model="testing" placeholder="Name" maxlength="50" /></div>
<span ng-if="testing.length != null " ng-show="Add()"></span>
Approach
<div class="col-sm-6">
<input type="text" class="form-control" ng-model="testing" placeholder="Name" maxlength="50" /></div>
<span ng-show="testing && Add()"></span>
Both fire my function with single character. I want to fire Add() function when my typing is completed. I do not want to use button.
Try following 2 sample codes.
I hope following sample code could help you solve the problem you were facing
var app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
$scope.testing = "";
$scope.Add = function() {
console.log("Hope this Helps!!")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<div class="col-sm-6">
<input type="text" class="form-control" ng-model="testing" placeholder="Name" maxlength="50" />
</div>
<span ng-if="testing.length >=1 " ng-show="Add()"></span>
<div>
or you could do like this
var app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
$scope.testing = ""; //model scope variable initialization
$scope.testFun=function(a){ //function to check whether length of variable is greater than 0
if (a>=1) return true;
else return false;
}
$scope.Add = function() { //function to be exucuted when ng-if gets true value
console.log("Hope this Helps!!")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<div class="col-sm-6">
<input type="text" class="form-control" ng-model="testing" placeholder="Name" maxlength="50" />
</div>
<span ng-if="testFun(testing.length)" ng-show="Add()"></span>
<div>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
it is for captcha
function drawcap()
{
var captcha=Math.ceil(Math.random()*1000000);
document.getElementById("txtdraw").value=captcha;
}
for submitting the form
function validate()
{
var str1=document.getElementById('txtdraw');
var str2=document.getElementById('txtinput');
if(str1==str2){
return true;}
else{
alert("fill correct captcha");
return false;
}}
</script>
</head>
<body style="background-color: aliceblue">
form for submitting and validating it
<form action="home.jsp" method="get" name="login" onsubmit="return validate();">
<fieldset style="align-self: center; height: 250px;">
<center><legend>login</legend></center>
<center><table style=" background-color: seashell; border:black; border-style: double; ">
<tr><td><label>Username</label></td>
<td><input type="text" name="username" required/></td>
<tr><td><label>Password</label></td>
<td><input type="password" name="password" required/></td></tr>
captcha code in this
<tr><td>Captcha</td><td><input type="text" readonly id="txtdraw"></td>
input by the user
<td><input type="text" id="txtinput" required=""/></td></tr>
<tr><td></td><td><input type="button" value="refresh" onclick="drawcap();" /></td></tr>
<tr><td><input type="submit" value="login"/></td>
<td><input type="reset" value="Reset"/><td></tr><br>
<tr><td>New Here</td><td>Forget Password</td></tr>
</table></center>
</fieldset>
</form>
</body>
</html>
I thing you need to do this.
in java scripting you need to write .value to get a VALUE of input the field.
function validate()
{
var str1 = document.getElementById('txtdraw').value;
var str2 = document.getElementById('txtinput').value;
if(str1!=str2){
console.log("fill correct captcha");
return false;
}else{
console.log('Correct')
}
}
<form action="home.jsp" method="get" name="login" onSubmit="return validate()">
<input type="text" id="txtdraw">
<input type="text" id="txtinput">
<input type="submit" value="submit">
</form>
<form return false>
<div> <input type="text">
</div>
</form>
I am making a dynamic form with multiple fields in bootstrap and when I add a new inline form, it is not aligned with the previous one. I appreciate if someone can help me with that.
image of the form
html:
<!-- start of the column with properties(form-control)-->
<div class="col-lg-8" id="property-col">
<div class="container">
<form class="form">
<div class="row">
<h3>Properties</h3>
<br>
</div>
<div class="row">
<div class="form-group">
<fieldset class="form-inline">
<label class="control-label">Image Size:</label>
<select class="form-control" id="image-size-selector">
<option value="128">128×128</option>
<option value="256">256×256</option>
<option value="512">512×512</option>
<option value="1024">1024×1024</option>
</select>
</fieldset>
</div>
</div>
<div class="row" id="dynamic_form">
<div class="form-group form-horizontal">
<label>Primitives</label>
<div class="container">
<div class="form-inline" id="primitive_fields">
<select class="input-small form-control" id="primitive-selector" name="PrimitiveChoose[]">
<option value=" " disabled selected>primitive</option>
<option value="sphere">sphere</option>
<option value="triangle">triangle</option>
</select>
<input type="number" class="input-small form-control" id="diameter" name="Diameter[]" step="any" placeholder="diameter(D)">
<input type="text" class="input-small form-control" id="sphere-position" name="SpherePosition[]" placeholder="(x, y, z)">
<select class="input-small form-control" id="circle-color-selector" name="CircColorSelect[]" >
<option value=" " disabled selected>color</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
</select>
<button type="button" class="btn btn-success btn-add" id="add_more"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
css:
.form-inline .input-mini
{
width: 70px;
font-weight: bold;
}
.form-inline .input-small
{
width: 120px;
font-weight: bold;
}
#primitive-form > *
{
margin: 2px 2px;
}
Hmmm maybe you need to create a codepen.
It seems align if not created dynamically.
http://codepen.io/seiran/pen/LWwWgX
Try to post your script.
//code is the same -- dont mind this
I think you are asking this type of format here i executed with the single input so you can add your own new things.
The fieldset is closed on the first form itself just cut the fieldset there with the belowed two div and paste at the end.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
var next = 1;
$(".add-more").click(function(e){
e.preventDefault();
var addto = "#field" + next;
var addRemove = "#field" + (next);
next = next + 1;
var newIn = '<input autocomplete="off" class="input form-control" id="field' + next + '" name="field' + next + '" type="text">';
var newInput = $(newIn);
var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">';
var removeButton = $(removeBtn);
$(addto).before(newInput);
$(addRemove).before(removeButton);
$('.remove-me').click(function(e){
e.preventDefault();
var fieldNum = this.id.charAt(this.id.length-1);
var fieldID = "#field" + fieldNum;
$(this).remove();
$(fieldID).remove();
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<input type="hidden" name="count" value="1" />
<div class="controls" id="profs">
<form class="input-append">
<div id="field"><input autocomplete="off" class="input" id="field1" name="prof1" type="text" placeholder="Type something" data-items="8"/><button id="b1" class="btn add-more" type="button">+</button></div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
I am trying to give a validation for array inputs using table ,if the inputs are empty it should suppose to give a validation for each input box border as red color.
My table code is like we can add multiple no of rows by click add button like
My table view
My validations are coming like as in the below image shown
My current validation output
and i want validation something like as below using $errors and has-feedback in bootstrap laravel
My desired output
table view code:
<form action="{{ url('/executor/event') }}" method="post" enctype="multipart/form-data">
<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
<table class="table table-bordered table-striped-col nomargin" id="table-data">
<tr align="center">
<td>Event Name</td>
<td>Event Code</td>
<td>Event Date</td>
<td>City</td>
<td>Country</td>
</tr>
<tr>
#if(null != old('eventname'))
#for($i=0;$i<count(old('eventname'));$i++)
<td>
<div class="form-group has-feedback {{ $errors->has('eventname'.$i) ? 'has-error' : '' }}" id="">
<input type="text" class="form-control " autocomplete="off" name="eventname[]" value="{{old('eventname'.$i)}}">
#if ($errors->has('eventname'.$i))
<p class="help-block"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
{{ $errors->first('eventname'.$i) }}</p>
#endif
</div>
</td>
#endfor
#else
<td>
<div class="form-group has-feedback {{ $errors->has('eventname') ? 'has-error' : '' }}" id="">
<input type="text" class="form-control " autocomplete="off" name="eventname[]" >
#if ($errors->has('eventname'))
<p class="help-block"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
{{ $errors->first('eventname') }}</p>
#endif
</div>
</td>
#endif
<td>
<input type="text" class="form-control" autocomplete="off" name="eventcode[]" >
</td>
<td>
<input type="text" class="form-control dob" autocomplete="off" name="date[]" >
</td>
<td>
<input type="text" class="form-control" autocomplete="off" name="city[]" >
</td>
<td>
<input type="text" class="form-control" autocomplete="off" name="country[]" >
</td>
<td>
<input type="button" value="+" class="add btn btn-success">
<input type="button" value="-" class="delete btn btn-danger">
</td>
</tr>
</table>
</br>
<center> <button type="submit" class="btn btn-primary" name="submit">Submit</button></center>
</form>
my controller is like below:
public function postEvent( EventRequest $request ) {
$data = Input::get();
for($i = 0; $i < count($data['eventname']); $i++) {
$c= new Event();
$c->event = $data['eventname'][$i];
$c->eventcode = $data['eventcode'][$i];
$c->date = $data['date'][$i];
$c->city = $data['city'][$i];
$c->country = $data['country'][$i];
$c->save();
}
$request->session()->flash('alert-success', 'Event was successful added!');
return redirect('executor/all');
}
and then my validation code in EventRequest.php
public function rules()
{
foreach($this->request->get('eventname') as $key => $val)
{
$rules['eventname.'.$key] = 'required';
}
return $rules;
}
I am using has-feedback error code inside my table for the first input .But still the validations are coming in the same way i could not able to find what was the mistake in my code.
Any help would be appreciated.
Thank you
im new so don't go to hard on me here. I'm trying to make this registration form into two rows but every time i try it does not post all the values from both rows of the form, just the first.
http://i.stack.imgur.com/TSnjl.png
<table width="990" border="0">
<tr>
<td width="486" height="221"><form id='register' action='<?php echo $fgmembersite->GetSelfScript(); ?>' method='post' accept-charset='UTF-8'>
<fieldset >
<legend>Register</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<div class='short_explanation'>* required fields</div>
<input type='text' class='spmhidip' name='<?php echo $fgmembersite->GetSpamTrapInputName(); ?>' />
<div class="container"><span class='error'><?php echo $fgmembersite->GetErrorMessage(); ?></span>
<label for='name' >Your First Name*: </label>
<br/>
<input type='text' name='name' id='name' value='<?php echo $fgmembersite->SafeDisplay('name') ?>' maxlength="50" />
<br/>
</div>
<div class='container'>
<label for='lastname' >Your Last Name*: </label>
<br/>
<input type='text' name='lastname' id='lastname' value='<?php echo $fgmembersite->SafeDisplay('lastname') ?>' maxlength="50" />
<br/>
<span id='register_name_errorloc' class='error'></span> </div>
<div class='container'>
<label for='email' >Email Address*:</label>
<br/>
<input type='text' name='email' id='email' value='<?php echo $fgmembersite->SafeDisplay('email') ?>' maxlength="50" />
<br/>
<span id='register_email_errorloc' class='error'></span> </div>
<div class='container'>
<label for='username' >UserName*:</label><br/>
<input type='text' name='username' id='username' value='<?php echo $fgmembersite->SafeDisplay('username') ?>' maxlength="50" /><br/>
<span id='register_username_errorloc' class='error'></span>
<br/>
<span id='register_username_errorloc' class='error'></span> </div>
<div class='container' style='height:80px;'>
<label for='password' >Password*:</label>
<br/>
<div class='pwdwidgetdiv' id='thepwddiv' ></div>
<noscript>
<input type='password' name='password' id='password' maxlength="50" />
</noscript>
<div id='register_password_errorloc' class='error' style='clear:both'></div>
</div>
<input type='text' class='spmhidip' name='<?php echo $fgmembersite->GetSpamTrapInputName(); ?>2' />
<div class="container">
<p><span class='error'><?php echo $fgmembersite->GetErrorMessage(); ?></span>
<label for='phonenumber' >Phone Number: </label>
<br/>
<input type='text' name='phonenumber' id='phonenumber' value='<?php echo $fgmembersite->SafeDisplay('phonenumber') ?>' maxlength="15" />
<br/>
</p>
</div>
<div class='container'>
<label for='address' >Address: </label>
<br/>
<input type='text' name='address' id='address' value='<?php echo $fgmembersite->SafeDisplay('address') ?>' maxlength="40" />
<br/>
</div>
<div class='container'>
<label for='city' >City:</label>
<br/>
<input type='text' name='city' id='city'value='<?php echo $fgmembersite->SafeDisplay('city') ?>' maxlength="20">
<br/>
</div>
<div class='container'>
<label for='State' >State:</label>
<br/>
<input type='text' name='state' id='state' value='<?php echo $fgmembersite->SafeDisplay('state') ?>' maxlength="2" />
</div>
<div class='container'>
<label for='State' >Country:</label>
<br/>
<input type='text' name='country' id='country' value='<?php echo $fgmembersite->SafeDisplay('country') ?>' maxlength="3" />
<br/>
</div>
<div class='container' style='height:80px;'>
<p>
<label for='zip' >ZipCode:</label>
<br/>
<input type='text' name='zipcode' id='zipcode' value='<?php echo $fgmembersite->SafeDisplay('lastname') ?>' maxlength="5" />
</p>
<div class='container'>
<input type='submit' name='Submit' value='Submit' />
</div>
<p> </p>
</div>
</fieldset>
</form></td>
<td width="494" valign="top"><h2> </h2></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
I think possible the error is in the way u use double quotes and single quotes.
value='<?php echo $fgmembersite->SafeDisplay('username') ?>'
should be changed to
value="<?php echo $fgmembersite->SafeDisplay('username') ?>"
Could you report back to me what happens if you do this in all the cases