Here is jsfiddle
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
</head>
<p>First name: <input data-bind="value: firstName" maxlength="3" /></p>
<style>
input:invalid
{
border-color: #e67b7b;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var viewModel =
{ firstName: ko.observable("Ikram")
};
ko.applyBindings(viewModel);
});
</script>
In Chrome when there is old value that exceeds maxlength, constraint validation does not validate until we edit input. When we start to edit it gets red.
In IE it works as expected, it gets red(validates) at the start when we load the page with old value.
This doesn't look like a knockout issue.
<input value='my longname' maxlength="3" />
Also does not show an error in chome.
Here is a knockout workaround.
First create a hasError computed obseable.
function hasErrorComputed(){
return viewModel.firstName().length > 3;
}
iewModel.hasError = ko.computed(hasErrorComputed);
Then bind css to hasError.
<input data-bind="css: {error: hasError}, value: firstName" maxlength="3" />
Here is the jsfiddle
A more eloquent solution can be achieved with custom-bindings: http://knockoutjs.com/documentation/custom-bindings.html
Or extenders http://knockoutjs.com/documentation/extenders.html
Please reach out for more details.
Related
I've searched SO a bit for the same issue, but I could only find 'sort of solutions' like max & maxlength, but these won't work for me.
HTML that I have:
<input type="text" id="current" name="current_xj" maxlength="9" placeholder="Enter your value">
I want to set the maximum at: 200000000.
I thought I could use max="200000000" but it doesn't work for me.
<input type="text" id="current" name="current_xj" maxlength="9" max="200000000" placeholder="Enter your value">
You can still enter the number 250000000 or 999999999, I tend to do some live calculations. So it doesn't validate if the number is higher then 200000000.
What I want to do is:
Option 1)
If somebody enters a number higher then 200000000, then change the input value to 200000000. Instantly, since there is no button to click (like submit or calculate or anything).
Option 2)
Don't allow any number higher then 200000000 being input.
How would I do this?
Thanks in advance!
Below is the code which will trigger the function when the value becomes greater
function func() {
if (document.getElementById("current").value > 200000000) {
//alert("reached max limit");
document.getElementById("current").value = 200000000;
}
}
<input type="text" id="current" name="current_xj" maxlength="9" onkeyup="func()" placeholder="Enter your value">
Try the below code:
$(document).ready(function() {
$("input").keyup(function() {
//alert($(this).val());
if ($(this).val() < 200000000) {
} else {
alert("Reached Maximun Limit of Input");
$(this).val() = 200000000;
}
});
});
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>Validate text Box</h4>
<input type="text" id="current" name="current_xj" maxlength="9" max="200000000" placeholder="Enter your value">
</body>
Here is some JQuery test you could continue on developing
$(document).ready(function() {
$(".Int").keydown(function() {
try {
var value = parseFloat($(this).val());
$(this).attr("Temp", value) // Save the current value
} catch (err) {
}
}).keyup(function() {
var value = parseFloat($(this).val());
var temp = $(this).attr("Temp");
var max = parseFloat($(this).attr("max"));
// if the new value bigger then max, then load the prev value
if (value > max)
$(this).val(temp);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="current" class="Int" name="current_xj" maxlength="9" max="200000000" placeholder="Enter your value">
i want to transfer data from div to hidden input
<div id="timing"><table>...i need date from here...</table></div>
my solve ,but it doesnt work:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#textarea').keyup(function() {
$('#dateD').html($('#div.timing').html());
});
});
</script>
<input type="hidden" id="dateD" value="" name="time1" >
Here, change from html(...) to val(...) and html() to text() :)
<script>
$(document).ready(function(){
$('#textarea').keyup(function() {
$('#dateD').val($('#div.timing').text());
});
});
</script>
<input type="hidden" id="dateD" value="" name="time1">
$('#timing').text() allows you to do this.
I have an input field which is being set to readonly by html attribute readonly I am inserting text into that field using jQuery .html() method:
<input type="text" id="myField" readonly="readonly" />
now I have a function myFunction() and I want it to be called when ever the text is being inserted to that field by jQuery.
To achieve what you require you could set the value using val(), then trigger a change event which you can hook an event handler to:
$('button').click(function() {
$('#myField').val('foo').trigger('change');
});
$('#myField').change(function() {
console.log('value changed...');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myField" readonly="readonly" />
<button>Set value</button>
I hope this will help you...
<input type="text" id="myField" readonly="readonly" value=""/>
<script>
$('#myField').on('change', function(){
if($('#myField').val()!=""){
myFunction();
}
});
</script>
Heres my Code:
<form>
<input class="wrapped-input" type="text" id="blah blah" style="text-align:center" placeholder="(Enter your exact search term here)" name="exact_term" tabindex="5" required/>
</form>
I've ommitted a few things to make this form functional, however I would like to place double quotes AROUND any value the user enters into the html input field.
What's the best way to do this?
I went under the assumption that you wanted to wrap what the user submits in quotes rather than manipulating the textbox itself.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
$(document).ready(function() {
$('#btnSubmit').click(function() {
var userInput = $('#blah-blah').val()
alert('User input: "' + userInput + '"');
});
});
</script>
</head>
<body>
<form>
<input class="wrapped-input" type="text" id="blah-blah" style="text-align:center" placeholder="(Enter your exact search term here)" name="exact_term" tabindex="5" required/>
<input type="submit" id="btnSubmit" value="Submit" />
</form>
</body>
</html>
You could use jQuery to manipulate the string before the form is submitted or you could just use string interpolation to add parentheses on the server side.
Here is a pure JavaScript version of what you want to do, because, well, screw jQuery.
var thing = document.getElementById('thing');
thing.addEventListener('keyup', function() {
if (!/^\"/.test(thing.value)) {
thing.value = '"' + this.value;
}
});
thing.addEventListener('blur', function() {
if (!/\"$/.test(thing.value)) {
thing.value = this.value + '"';
}
});
I realise that the HTML5 elements do not work on IE. ELements such as required placeholder are not working on IE. I found a javascript to make the placeholder work already but I would like to ask if is there any javascript coding to make the required attribute work as well??
Cheers!
My code:
<input required="required" type="password" name="password" id="password" class="regfields"/>
Thanks in advance
add this js refrence :
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
and try this:
<form id="myform">
<script type="text/javascript">
jQuery.validator.setDefaults({
debug: true,
success: "valid"
}); ;
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#myform").validate({
rules: {
field: "required"
}
});
});
</script>
<label for="field">
Required:
</label>
<input class="left" id="field" name="field" />
<br />
<input type="submit" value="Validate!" />
</form>
You could find some useful polifills here : https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills. FORM polifill will give you the HTML5 FORM facilities even in IE. Maybe this is what you need : http://www.useragentman.com/blog/2010/07/27/cross-browser-html5-forms-using-modernizr-webforms2-and-html5widgets/