I have a textfield.
I want to make this field accept ONLY 10 digits, and throw an error if the digits entered are more than 10 or less than 10
<td><input name="Number" type="text" id="Number" value="" required/></td>
document.getElementById('Number').onchange = function()
{
if(this.value > 11){
this.value = "Please Check the Ticket Number Again";
}
if(this.value < 10){
this.value = "Please Check the Ticket Number Again";
}
}
Try this code:
<td><input name="Number" type="text" id="Number" value="" required/></td>
document.getElementById('Number').onchange = function()
{
if(this.value.length != 10){
this.value = "Please Check the Ticket Number Again";
}
}
Related
Based on the index value need the if condition to dynamically change and show the contents based on that.
Have 3 dropdown and when a certain value is selected from the drop down the 4 text fields need to be shown.
When I select a value from the first dropdown and meets the v-if condition then the 4 text fields are shown and when I go and select another option from the dropdown which also meets the if criteria the text fields are shown under the 2nd dropdown but fields under the 1st dropdown goes off.
<template>
<tr
v-if="(rowIndex == index && isCtlRail)"
:id="'ctlRail_'+items.id"
style="line-height:2em;"
>
<td
style="text-align:left; vertical-align:top;font-size:9pt;"
colspan="4"
>
Length:
<br>
Left Cut:
<br>
Right Cut:
<br>
Rotate 90°:
<br>
</td>
<td>
<input
id="bap_productLen"
v-model="length"
type="number"
inputmode="numeric"
value="20"
maxlength="4"
min="20"
max="5000"
>
<br>
<select
id="leftCut"
v-model="leftCutSelected"
name="leftCut"
style="font-size:10pt;"
>
<option value="45">
45°
</option>
<option value="90">
90°
</option>
</select>
<br>
<select
id="rightCut"
v-model="rightCutSelected"
name="rightCut"
style="font-size:10pt;"
>
<option value="45">
45°
</option>
<option value="90">
90°
</option>
<option value="135">
135°
</option>
</select>
<br>
<input
v-model="rotate"
type="checkbox"
:disabled="!rotateFlag"
>
</td>
</tr>
</template>
The above is the code for the 4 text fields to be shown. In the v-if condition , isCtlRail I am setting it as true when the index is 0 or 1 or 2 based on the condition check in the method. Similarly for rowIndex as well.
Tried setting dynamic value to if but condition did not work.
For eg:-
v-if="(rowIndex_+index == index && isCtlRail_+index == index)"
so that it will be specific to that particular row but did not work , always the text fields where shown under all the 3 dropdowns.
Please let me know how to proceed further.
Below is the method where I am setting the values for rowIndex
readOrdAttribute : function(value) {
console.log("Inside the readOrdAttribute function");
if(this.orderingAttribute !== undefined && this.orderingAttribute.isCTLCable === 'true')
this.isCtlCable = true;
else
this.isCtlCable = false;
if(this.orderingAttribute !== undefined && this.orderingAttribute.isCTLRail === 'true'){
//this.isCtlRail = true;
console.log("the ctrail shape is...rectangular...." + this.orderingAttribute.rail_shape);
this.railShape = this.orderingAttribute.rail_shape;
if (value === 'showDiv_1'){
//this.isCtlRail_0 = true;
this.isCtlRail_0 = '0';
this.rowIndex = '0';
this.rowIndex_0 = '0';
this.isCtlRail = true;
}
else if (value === 'showDiv_2'){
//this.isCtlRail_1 = true;
this.isCtlRail_1 = '1';
this.rowIndex = '1';
this.rowIndex_1 = '1';
this.isCtlRail = true;
console.log("value of isCtlRail_1 is " + this.isCtlRail_1 +"and rowIndex_1 is " +this.rowIndex_1);
}
else {
//this.isCtlRail_2 = true;
this.isCtlRail_2 = '2';
this.rowIndex = '2';
this.rowIndex_2 = '2';
this.isCtlRail = true;
}
}
else{
if (value === 'showDiv_1'){
console.log("value === 'showDiv_1'");
this.isCtlRail_0 = '';
this.rowIndex_0 = '';
}
else if (value === 'showDiv_2'){
console.log("value === 'showDiv_2'");
this.isCtlRail_1 = '';
this.rowIndex_1 = '';
}
else {
console.log("value === 'showDiv_3'");
this.isCtlRail_2 = '';
this.rowIndex_2 = '';
}
}
},
I am trying to validate series of dates with something like this.
const data = [
{begin: new Date('2019-12-01'), place: '2'},
{begin: new Date('2019-12-03'), place: '3'}
... more values
];
// Elements inside data can be added or removed but will have at least one.
Here data[1][begin] should be more than or equal to data[0][begin] and data[1][place] should not equal to data[0][place]. Is there anyway to achieve this. Documentation talks about dynamic validation but I am not sure how I can achieve this with collection.
You can consider implementing a custom validation in the form submit event listener.
This can be achieved by looping through your array of objects and compare items in pairs.
HTML
<form
id="app"
#submit="checkForm"
action="/someurl"
method="post"
>
<table border="1">
<tr v-for="(item,index) in dates" :key="index">
<td>
{{index}}
</td>
<td>
{{formatDate(item.begin)}}
</td>
<td>
{{item.place}}
</td>
</tr>
</table>
<input type="date" v-model="dateEntry"/>
<input type="text" v-model="placeEntry"/>
<button type="button" #click="addEntry">Add</button>
<p>
<br>
<input
type="submit"
value="Submit"
>
</p>
<p v-for="error in errorList">
{{error}}
</p>
</form>
JS
new Vue({
el: "#app",
data: {
errorList: [],
dateEntry: null,
placeEntry: null,
dates: [
{begin: new Date('2019-12-01'), place: '2'},
{begin: new Date('2019-12-03'), place: '3'}
]
},
methods: {
addEntry: function(){
if(this.dateEntry == null || this.dateEntry == "")
return false;
if(this.placeEntry == "")
return false;
this.dates.push({
begin: new Date(this.dateEntry),
place: this.placeEntry
});
this.dateEntry = null;
this.placeEntry= "";
},
checkForm: function(e){
var isValid = true;
var index = 0;
var nextIndex = 1;
this.errorList = [];
while(nextIndex < this.dates.length){
if(nextIndex < this.dates.length){
var isValidDate = this.validDate(this.dates[nextIndex].begin,this.dates[index].begin);
var isValidPlace = this.validPlace(this.dates[nextIndex].place,this.dates[index].place);
if(!isValidDate){
this.errorList.push("Invalid date on index " + nextIndex);
}
if(!isValidPlace){
this.errorList.push("Invalid place on index " + nextIndex);
}
}
index++;
nextIndex++;
}
if(!this.errorList.length){
this.errorList.push("All dates are valid");
return true;
}
e.preventDefault();
},
formatDate: function(date){
return date.toDateString();
},
validPlace: function(curPlace, prevPlace){
return curPlace != prevPlace;
},
validDate: function(curDate,prevDate){
try{
return curDate.getTime() >= prevDate.getTime();
}catch(e){
return false;
}
}
}
})
Check out this JS Fiddle that I created to illustrate my suggestion.
On the other hand, if you are building the array during runtime, then you can apply the validation before it gets added into the array.
I came from the issue [https://datatables.net/forums/discussion/51949/looping-multiple-datatables-on-the-same-page#latest] and found an issue that comes from filtering of dates: if I filter and on change of this date range, it triggers table.draw() for the first one if it is inside of the loop of multiple datatable in the same page
My intention is to have the data range to work on each datatable individually
Here is a sample of what I already done
http://live.datatables.net/magokusa/4/edit
HTML
<div class="container">
<h3>Table 1</h3>
<div class="input-group input-group-sm">
<input type="date" id="dateFromupper" placeholder="Date from" value="2017-04-10">
<div>
<div>to</div>
</div>
<input type="date" id="dateToupper" placeholder="Date to" value="2018-09-10">
</div>
<table id="upper" data-action="https://demo.wp-api.org/wp-json/wp/v2/posts?per_page=5" class="display nowrap datatable" width="100%">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
</table>
<hr>
<h3>Table 2</h3>
<div class="input-group input-group-sm">
<input type="date" id="dateFromlower" placeholder="Date from" value="2016-04-10">
<div>
<div>to</div>
</div>
<input type="date" id="dateTolower" placeholder="Date to" value="2018-09-12">
</div>
<table id="lower" data-action="https://css-tricks.com/wp-json/wp/v2/posts?per_page=5" class="display nowrap datatable" width="100%">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
</table>
</div>
JS
$(document).ready( function () {
$.each($('.datatable'), function () {
var dt_id = $(this).attr('id');
var dt_action = $(this).data('action');
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var min = $("#dateFrom" + dt_id).val();
var max = $("#dateTo" + dt_id).val();
if (min != null && max != null) {
min = new Date(min);
max = new Date(max);
var startDate = new Date(data[1]);
if (min == null && max == null) {
return true;
}
if (min == null && startDate <= max) {
return true;
}
if (max == null && startDate >= min) {
return true;
}
if (startDate <= max && startDate >= min) {
return true;
}
} else {
return true;
}
}
);
$("#dateFrom" + dt_id + ", #dateTo" + dt_id).change(function () {
table.draw();
});
if (dt_action != null) {
var dt_ajax = dt_action;
var table = $('#' + dt_id).DataTable({
ajax: {
"url": dt_ajax,
"dataSrc": ""
},
columns: [
{ "data": "status" },
{ "data": "date" },
{ "data": "date_gmt" },
]
});
} else {
var table = $('.datatable').DataTable({
retrieve: true,
responsive: true,
});
}
});
});
Since you already are declaring two different filters, you can just check if the current draw process is related to the filter itself :
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
if (settings.sInstance != dt_id) return true
...
}
)
Can anyone help me check if a username is in my database using ajax and code igniter?
I can't use the form_validation method as I have modal windows which interfere with the checking.
Currently my controller looks like:
function filename_exists(){
$username = $this->input->post('username');
$data['exists'] = $this->User_model->filename_exists($username);
}
My Model:
function filename_exists($username)
{
$this->db->select('*');
$this->db->from('users');
$this->db->where('username', $username);
$query = $this->db->get();
if ($query->num_rows() == 0) {
return true;
} else {
return false;
}
}
and my ajax post:
function check_if_exists() {
<?php $username = $this->input->post('username');
?>
var username = '<?php echo $username ?>';
var DataString=$("#form1").serialize();
$.ajax({
url: "<?php echo base_url(); ?>index.php/Files/filename_exists/",
type: "post",
data: DataString + '&username=' + username,
success: function(response) {
if (response == true) {
$('#msg').html('<span style="color: green;">'+msg+"</span>");
}
else {
$('#msg').html('<span style="color:red;">Value does not exist</span>');
}
}
});
}
UPDATE
<form name = "form1" id = "form1" method ="post"> <!--action="<?php echo base_url()."index.php/Admin/create_user"; ?>"-->
<?php echo validation_errors(); ?>
<label for="userID" class = "labelForm">User ID:</label>
<input type="text" id="userID" name="userID" class = "input2">
<label for="first_name" class = "labelForm">First Name:</label>
<input type="text" id="first_name" name="first_name" class = "input2">
<label for="last_name" class = "labelForm">Last Name:</label>
<input type="text" id="last_name" name="last_name" class = "input2">
<label for="username" class = "labelForm">Username:</label>
<input type="text" id="username" name="username" class = "input2" onblur="check_if_exists();">
<label for="password" class = "labelForm">Password:</label>
<input type="password" id="password" name="password" class = "input2" onblur="checkPasswords();">
<label for="passconf" class = "labelForm">Password:</label>
<input type="password" id="passconf" name="passconf" class = "input2" onblur="checkPasswords();">
<label for="email" class = "labelForm">Email:</label>
<input type="text" id="email" name="email" class = "input2">
<button type="button" id = "new_user_submit">Add New User</button>
Try this
In Ajax
function check_if_exists() {
var username = $("#username").val();
$.ajax(
{
type:"post",
url: "<?php echo base_url(); ?>index.php/files/filename_exists",
data:{ username:username},
success:function(response)
{
if (response == true)
{
$('#msg').html('<span style="color: green;">'+msg+"</span>");
}
else
{
$('#msg').html('<span style="color:red;">Value does not exist</span>');
}
}
});
}
In Controller
function filename_exists()
{
$username = $this->input->post('username');
$exists = $this->User_model->filename_exists($username);
$count = count($exists);
// echo $count
if (empty($count)) {
return true;
} else {
return false;
}
}
In Model
function filename_exists($username)
{
$this->db->select('*');
$this->db->from('users');
$this->db->where('username', $username);
$query = $this->db->get();
$result = $query->result_array();
return $result
}
If you are just trying to see if the user already exists, there is no reason to query with the get() function. just do the count_all_results() it will return a number if the user is found, 0 if not.
function filename_exists($username) {
$this->db->where('username', $username);
return $this->db->count_all_results('users');
}
All this will do is return a number greater than zero if the username exists in your db.
Just another approach with same result
MODEL
function filename_exists($username) {
$this->db->select()->from('users')->where('username', $username);
$query = $this->db->get();
return $query->first_row('array'); // returns first row if has record in db
}
CONTROLLER
function filename_exists() {
$username = $this->input->post('username');
$user = $this->user_modal->filename_exists($username);
return !empty($user); // not empty returns true else false
}
AJAX
Inside the check_if_exists function.
$.post('<?php echo base_url(); ?>index.php/files/filename_exists', { username: $('#username').val() }, function(response) {
var html = '<span style="color:red;">Value does not exist</span>';
if (response == true) {
html = '<span style="color: green;">' + msg + '</span>';
}
$('#msg').html(html);
});
This is the code I use for register users into mysql db. And I'm using Twitter Bootstrap tooltips, for obtain the following:
initially, when the user hover over the textboxes, the string wrote in the title attribute will be displayd.
if he will write only 2 letters (fe, for the firstname), and presses the submit button, the form won't be submitted, and the new tooltip message should flash and show: "Please use at least 3 letters!".
the same algorithm for every input in form.
if the user fills in correctly all the textboxes, then the form will be submitted to register.php, which will process the data.
<form id="form">
<div class="form-group">
<input type="text" class="form-control" id="firstname" placeholder="First Name" style="width:48%;float:left;" title="The First Name is mandatory! Please use at least 3 letters!"/>
<input type="text" class="form-control" id="lastname" placeholder="Last Name" style="width:48%;float:right;" title="The Last Name is mandatory! Please use at least 3 letters!"/>
<div style="clear:both;"></div>
</div>
<div class="form-group">
<input type="number" class="form-control" id="cnp" placeholder="CNP" title="The CNP is mandatory! Please use exact 13 numbers!"/>
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Password" style="width:48%;float:left;" title="The Password is mandatory! Please use at least 6 chars!"/>
<input type="password" class="form-control" id="password_again" placeholder="Retype the Password" style="width:48%;float:right;" title="This field must be the same as Password field"/>
<div style="clear:both;"></div>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="E-mail" title="The Email is mandatory!"/>
</div>
<div class="form-group text-center">
<button class="btn btn-default">Register</button>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#firstname').tooltip();
$('#lastname').tooltip();
$('#cnp').tooltip();
$('#password').tooltip();
$('#password_again').tooltip();
$('#email').tooltip();
$('#form').on('submit', function(e){
var firstname = $('#firstname').val().trim();
var lastname = $('#lastname').val().trim();
var cnp = $('#cnp').val().trim();
var password = $('#password').val().trim();
var password_again = $('#pssword_again').val().trim();
var email = $('#email').val().trim();
if (firstname != '' && firstname.length > 3 && lastname != '' && lastname > 3 && cnp != '' && cnp.length == 13 && password != '' && password.length >= 6 && password_again == password && email != ''){
$.ajax({
type: "POST",
url: "php/register.php",
data: {firstname: firstname, lastname: lastname, cnp: cnp, password: password, email: email},
success: function(response){
$('#content').html(response);
}
});
} else {
if (firstname.length < 3) {
$('#firstname').tooltip('show',function(){
title: "Please use at least 3 letters!"
});
}
}
e.preventDefault();
});
});
</script>
Problems:
When the user doesn't put the expected data (fe, at least 3 letters), the tooltip isn't changing accordingly (fe, Please use at least 3 letters!).
When the user does put the expected data, then for an unknown reason, the form isn't submitted!
Any suggestion? Thank you!
Add text to tooltip dynamically - with var:
var msg = '';
msg = 'Please use at least 3 letters';
and clear the message before that;
var msg = '';
if (firstname.length < 3) {
msg = Please use at least 3 letters;
$('#firstname').tooltip('show',function(){
title: msg
});
}
remove e.preventDefault(); - put it in the part when error occur, as it prevents the default event, ie: submit.
Edit:
$(document).ready(function(){
$('#firstname').tooltip();
$('#lastname').tooltip();
$('#cnp').tooltip();
$('#password').tooltip();
$('#password_again').tooltip();
$('#email').tooltip();
var msg = '';
$('#form').on('submit', function(e){
var firstname = $('#firstname').val();
var lastname = $('#lastname').val();
var cnp = $('#cnp').val();
var password = $('#password').val();
var password_again = $('#pssword_again').val();
var email = $('#email').val();
if (firstname != '' && firstname.length > 3 && lastname != '' && lastname > 3 && cnp != '' && cnp.length == 13 && password != '' && password.length >= 6 && password_again == password && email != ''){
$.ajax({
type: "POST",
url: "php/register.php",
data: {firstname: firstname, lastname: lastname, cnp: cnp, password: password, email: email},
success: function(response){
$('#content').html(response);
return true;
}
});
} else {
if (firstname.length < 3) {
msg = 'Please use at least 3 letters!';
$('#firstname').tooltip('show',function(){
title: msg
});
}
e.preventDefault();
}
});
});