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/
Related
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.
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>
I am pretty new to Angular JS .Here I have a simple form as below:
test3.php:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.4/angular.min.js"></script>
</head>
<body>
<form name="myForm" id="myForm" ng-controller="Register" ng-submit="submit()" action="test2.php" method="post">
<label>First Name:</label>
<input type="input" name="firstname" ng-model="firstname" required>
<label>Last Name:</label>
<input type="input" name="lastname" ng-model="lastname" required>
<label>Email:</label>
<input type="email" name="email" ng-model="email" required>
<input type="submit" id="submit" value="Submit" />
</form>
<script>
function Register($scope) {
$scope.firstname = '';
$scope.lastname = '';
$scope.email = '';
$scope.submit = function() {
document.getElementById('myForm').submit();
};
}
</script>
</body>
</html>
And test2.php:
<?php
echo $_POST['firstname'];
?>
When I load test3.php and click on submit without filling any details, I get the message to fill the fields accordingly and the form is not submitted to test2.php. When all the details are entered properly and then if I click Submit, I see the $_POST['firstname] value. This works correctly in chrome and firefox.
But in IE9, there is no validation at all. On click of Submit, the form is submitted always, be the fields empty or not.
How do I make this code work in IE9 and further? The Angular JS API provides help for IE versions 8 and less.
The cause is due to the fact that (IE < 10) are not HTML5 compliant with respect to client-side validation and therefore wont return true if a "required" attribute is present on the input element, but instead return the (string) attribute value.
Use ngRequired instead of required attribute.
I am submitting form via javascript by using 'document.FormName.submit()' . But this is giving me error of 'submit is not a function'. I m using IE8
<script typr="text/javascript">
function submitForm()
{
document.theForm.submit()
}
</script>
<body>
<form name="theForm" method="post">
<input type="text" name= "name">
<input type="button" name="submit" value="submit" onclick="submitForm()">
</form>
</body>
Please help me ?
problem is with your button name
i have use this its work fine
<script type='text/javascript'>
function submitForm()
{
document.theForm.submit();
}
</script>
<form name="theForm" method="post" action="default.php">
<input type="text" name="t" id="t"/><br/>
<input type="button" name="t1" value="submit" onClick="submitForm();">
</form>
use
document.forms[index].submit()
instead
Try this:
document.getElementsByName("theForm")[0].submit();
And you need to put the script after you declared the elements so :
<form name="theForm" onSubmit= "submitForm()">
<input type="text" name= "name">
<input type="submit" name="submit" value="submit">
</form>
<script type="text/javascript">
function submitForm()
{
document.getElementsByName("theForm")[0].submit();
}
</script>
Or you can use events like document onload if you want to kepp your scripts in the page head.
If your form name is FormName
try this
Action
by the way your code is missing a semicolon at the end of the statement
and a spelling mistake here
<script typr="text/javascript">
typr
Here is the problem
change it typr is nothing should be type
<script typr="text/javascript">
to
<script language="javascript">
OR
<script type="text/javascript">
I just copy your code and executed in IE8 and it worked fine, so how is not working on your IE8. May be it is because of your hierarchy. So you please give id to form and try document.getElementById to access your form and then submit method. Do some thing like this"
<script type='text/javascript'>
function submitForm()
{
document.getElementById('your_form').submit();
}
</script>
<form name="theForm" id="your_form" method="post" action="default.php">
<input type="text" name="t" id="t"/>
<input type="button" name="t1" value="submit" onClick="submitForm();">
</form>
document.getElementById("theForm").submit();
It works perfect in my case.
you can use it in function also like,
function submitForm()
{
document.getElementById("theForm").submit();
}
Set "theForm" as your form ID. It's done.
Hey guys, this bit of code works in IE but not in Chrome, any idea why?
<script type="text/javascript">
function fillreply(commentID){
var item = document.getElementById("replyto");
item.value=commentID;
}
</script>
...
...
<div id="makereply" class="hidden">Reply to: <input type="text" size="6"
name="replyto" readonly />
In IE javascript:fillreply(4); will work but not in chrome where nothing happens.
Your input doesn't have an id attribute, and you're trying to retrieve it with getElementById.
<input type="text" size="6" id="replyto" name="replyto" readonly="readonly" />