head runat="server">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$document.ready(function(){
$("#Form1").validate({
rules:{
txtFname:{
required:true,
rangelength:[3,20],
}
},
messages: {
txtFname: "First Name Is Required",
}
})
})//ready function close
</script>
</head>
<body>
<form id="Form1" runat="server" clientidmode="static">
<asp:TextBox ID="txtFname" CssClass="form-control" runat="server"></asp:TextBox>
<asp:Button CssClass="btn btn-primary" id="btnSubmit" runat="server" Text="Submit"/>
</form>
</body>
I am trying to validate the txtFname Field in the form at row 1 in the modal but I am not able to.. I cant seem to figure out why. Can someone please help?
I am using bootstrap v3
Seems like a syntax issue (parenthesis, some extra colons and missing semicolons...etc)
try the following should work:
<script type="text/javascript">
$(document).ready(function() {
$("#Form1")
.validate({
rules: {
txtFname: {
required: true,
rangelength: [3, 20]
}
},
messages: {
txtFname: "First Name Is Required"
}
});
})//ready function close
</script>
Related
I am using daterangepicker and created an asp.net webform with help of the following codes
<script type="text/javascript">
$(function () {
$('#calendar').datetimepicker({
format: 'L',
inline: true
});
});
</script>
<div id="calendar" style="width: 100%"></div>
<asp:HiddenField ID="HiddenField1" runat="server" />
I wanted to display selected date into asp.net Hidden Field
Try the below code.
$(function() {
$('#calendar').datetimepicker({
format: 'L',
inline: true
});
});
$("#calendar").on("dp.change", function (e) {
alert(e.date);
$('#HiddenField1').val(e.date);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" />
<div id="calendar" style="width: 100%"></div>
<asp:HiddenField ID="HiddenField1" runat="server" />
I am using http://sliptree.github.io/bootstrap-tokenfield/ to let users select multiple keywords and submit it via post request in Django. Here is what a snippet of code looks like:
<!DOCTYPE html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.css" />
</head>
<body>
<form action="/lol" method="POST">
<input type="text" class="form-control" id="keyword" value="red,green,blue" />
<button class="btn btn-primary"> <span class="glyphicon glyphicon-upload" style="margin-right:5px;"></span>Submit Values</button>
</body>
<script>
$('#keyword').tokenfield({
autocomplete: {
source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
delay: 100
},
showAutocompleteOnFocus: true
})
</script>
</html>
Let's say I fill values in my input text as red green and blue and hit submit. Likely, it should make a POST request to /lol endpoint and submit the values under keyword= param. But it doesn't work.
Is there some issue with Token-Field Library ? How do I make post request of the values user input ?
You need to assign a name attribute to the input element. Form elements without a name will not be included in the request.
Following will work,
<input type="text" class="form-control" name="keyword" id="keyword" value="red,green,blue" />
The W3C specification mandates that every form input element have a name attribute specified. Otherwise, that element will not be processed. Source
I have two jQuery functions one for date time picker
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#txtDate").datepicker();
});
</script>
And another for Multiselect Dropdown/Listbox with checkbox.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"</script>
<script type="text/javascript">
$(document).ready(function () {
$('[id*=lstFruits]').multiselect({
includeSelectAllOption: true
});
});
And the ASP code as:
for date time
<asp:TextBox ID="txtDate" runat="server" ></asp:TextBox>
for dropdown
<asp:ListBox ID="lstFruits" runat="server" SelectionMode="Multiple">
<asp:ListItem Text="Mango" Value="1" />
<asp:ListItem Text="Apple" Value="2" />
<asp:ListItem Text="Banana" Value="3" />
<asp:ListItem Text="Guava" Value="4" />
<asp:ListItem Text="Orange" Value="5" />
</asp:ListBox>
The problem that I am having is that both of them don't work together if I put them in my code only date time picker works and not the multi-select dropdown and the multi-select dropdown works only when I comment out the corresponding date time picker code.
There is some dysfunctionality which I am not able to figure out.
This is a working sample based on the files you are referencing in your page put it is HTML based not ASPX it will be easy to you to use.
Note:- you were referencing two jquery versions i commented one of them
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>!-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#txtDate").datepicker();
$('[id*=lstFruits]').multiselect({
includeSelectAllOption: true
});
});
</script>
Please find the full sample here
I am using a third party library mento.io Github for achieving my requirements.
This library is good enough to show suggestion after a specific character but my requirement is that user should get suggestions as soon as it starts typing like IntelliSense on some editor.
Problem
How to start the suggestion when an user hits any character. Right now its only working with # symbol
// Code goes here
var app = angular.module('app', ['mentio']);
app.controller('ctrl', function ($scope) {
$scope.people = [
{ label: 'Joe' },
{ label: 'Mike' },
{ label: 'Diane' }
]
$scope.myval = '';
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<!--<link rel="stylesheet" href="style.css" />-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://jeff-collins.github.io/ment.io/dist/mentio.js"></script>
<script src="script.js"></script>
</head>
<body><div ng-app="app" ng-controller='ctrl'>
<input type="text" mentio id="test" mentio-id="'test'" mentio-typed-text="typedTerm" mentio-trigger-char="'#'" mentio-items="people"
ng-model="myval" />
</div>
</body>
</html>
If you need to figure this out with mentio.io lib, take a look at this pull request:
https://github.com/jeff-collins/ment.io/pull/94
I was faced the same problem using mento.io and just changed framework: https://leaverou.github.io/awesomplete
mentio-trigger-char="''" seems to work, seems a little bit akward for me but it works
// Code goes here
var app = angular.module('app', ['mentio']);
app.controller('ctrl', function ($scope) {
$scope.people = [
{ label: 'Joe' },
{ label: 'Mike' },
{ label: 'Diane' }
]
$scope.myval = '';
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<!--<link rel="stylesheet" href="style.css" />-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://jeff-collins.github.io/ment.io/dist/mentio.js"></script>
<script src="script.js"></script>
</head>
<body><div ng-app="app" ng-controller='ctrl'>
<input type="text" mentio id="test" mentio-id="'test'" mentio-typed-text="typedTerm" mentio-trigger-char="''" mentio-items="people"
ng-model="myval" />
</div>
</body>
</html>
i want to load a calender in my text box i m working in asp.net and mvc
i want to load the text in red tex box i m writing this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
i m doing tis in my js
and i m doing this in my view bag i just want to show that i m adding libraries in my view bag
<script src="js/jquery.min.js"></script>
<script src="js/chkList.js"></script>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" href="../../css/jquery-ui.css">
Html
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("[id$=txtDate]").datepicker({
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'http://jqueryui.com/demos/datepicker/images/calendar.gif'
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="txtDate" runat="server" ReadOnly = "true"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="Submit"
onclick="btnSubmit_Click" />
</form>
</body>
</html>
C#
protected void btnSubmit_Click(object sender, EventArgs e)
{
string dt = Request.Form[txtDate.UniqueID];
}
here is the example..
$(function() {
$( "#datepicker" ).datepicker();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>