I am using html5 attribute 'required' in my form. Following are code snippets
$('form').validationEngine('attach', {
promptPosition: "centerRight",
scroll: false,
binded: false,
onValidationComplete: function(form, status) {
if (status == true) {
} else {
// foo;
}
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-en.js"></script>
<form method="post">
<input type="text" id="nameIt1" name="nameIt" placeholder="Product name..." class="text validate[required] nameIt" required="required">
<input type="submit" value="Submit" class="button yellow">
</form>
Here, the html5 native validation popup appears instead of validation engine popup. If I remove html5 attribute 'required' the code works properly.
Experts, please shade light on this.
Thanks in advance.
Ganesh
Actually if the main purpose of this code is to validate required text field your code works fine because I tested it already on my machine. The required attribute must be present in order to make that field native required html5. It's not even necessary to set that attribute to any value it should be only like this:
<input type="text" id="nameIt1" name="nameIt" placeholder="Product name..." class="text validate[required] nameIt" required >
And it will work just fine. If you remove that attribute the form will post back with the empty field from your specific code. But if you make some changes on your javascript function then you will notice the validation engine popup and in that case the required attribute is not required. See below here:
$('form').validationEngine('attach', {
promptPosition: "centerRight",
scroll: false,
binded: false,
onValidationComplete: function (form, status) {
if (status == true) {
form.validationEngine('detach');
form.submit();
alert('it is Ok');
} else {
alert('Not OK');
}
}
});
I hope this may help
Related
I have search area which works fine as I need it to but the problem is when i hit enter it won't search for results, so you need to press button to do so. I tried different codes but nothing is working and I'm wondering if anyone has solution for it. This is code that I have:
<input
data-path=".title"
data-button="#title-search-button"
type="text"
value=""
placeholder="Search..."
data-control-type="textbox"
data-control-name="title-filter"
data-control-action="filter"
/>
I guess this could work with "onkeydown=" but not really sure what to add after it.
I would really appreciate if someone has solution for this.
Although you can use the onkeydown attribute I prefer to do these things through JavaScript event listeners & handlers. If you want to do this with the onkeydown attribute then look at Bryan's answer.
I would first add an ID/Class name to the input so we can easily target it. In my example i will add searchTextas the ID for this input.
JavaScript:
document.getElementById('searchText').addEventListener("keydown",function(e){
if(e.keyCode == 13){
//doSomething()
}
});
jQuery:
$('#searchText').on('keydown',function(e){
if(e.which == '13'){
//doSomething();
}
});
Yes, this would work with keydown. But you will need to add javascript for it to work.
<input
data-path=".title"
data-button="#title-search-button"
type="text"
value=""
placeholder="Search..."
data-control-type="textbox"
data-control-name="title-filter"
data-control-action="filter"
onkeydown="if (event.keyCode == 13) { // Your search results code here;
return false; }"
/>
You will have to add an event listener for keyup for your input field. e.keyCode will give you the special keys (which happens to be 13 for Enter)
Here is an example:
$("#myinput").on('keyup', function (e) {
if (e.keyCode == 13) {
alert("Enter clicked");
// add your code here
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input
id = "myinput"
data-path=".title"
data-button="#title-search-button"
type="text"
value=""
placeholder="Search..."
data-control-type="textbox"
data-control-name="title-filter"
data-control-action="filter"
/>
Hope this helps!
I have given a sample code below using plan javascript. This solution will work without jquery or other libraries.
On the key press event, you can either call the same method of the click event (or) trigger the button click directly as per the option 1 and option 2 mentioned below.
function triggerSearch() {
if(event.keyCode === 13) {
// Option 1: You can call the 'search' method directly
//search();
// Option 2: OR you can trigger the button `click` event
getElement('searchButton').click();
}
}
function search() {
var searchTerm = getElement('searchTextBox').value;
getElement('searchTerm').innerHTML = searchTerm;
}
function getElement(id) {
return document.getElementById(id);
}
<input
data-path=".title"
data-button="#title-search-button"
type="text"
value=""
placeholder="Search..."
data-control-type="textbox"
data-control-name="title-filter"
data-control-action="filter"
id="searchTextBox"
onkeydown="triggerSearch()"
/>
<input type="button" value="Search" id="searchButton" onclick="search()" />
<br/><br/>
Search Term: <span id="searchTerm"></span>
I know that is posible with jquery but I dont know how to do that with angular js, please any sugestion?
function mayuscula(campo){
$(campo).keyup(function() {
$(this).val($(this).val().toUpperCase());
});
}
You can also create a directive for this!
Check the code:
directive('uppercase', function() {
return {
restrict: "A"
require: "?ngModel",
link: function(scope, element, attrs, ngModel) {
//This part of the code manipulates the model
ngModel.$parsers.push(function(input) {
return input ? input.toUpperCase() : "";
});
//This part of the code manipulates the viewvalue of the element
element.css("text-transform","uppercase");
}
};
})
For its usage, here's an example:
<input type="text" ng-model="myModel" uppercase />
You could do it in HTML template or via JS using the angular uppercase filter.
<div>
<label>Input 1</label>
<input type="text" ng-model="first">{{ first | uppercase }}
</div>
If you need to change the value in-place, use toUpperCase when ever value is changed.
<div>
<label>Input 1</label>
<input type="text" ng-model="first" ng-change="text = text.toUpperCase()">
</div>
Above in preferred approaches. Here's yet another way to achieve same result using $watch but this is not recommended. See comments section.
<div>
<label>Input 2</label>
<input type="text" ng-model="second">
</div>
var unwatch = $scope.$watch('second', function(val) {
$scope.second = $filter('uppercase')(val);
}, true);
$scope.$on('$destroy', unwatch);
Related Plunker here http://plnkr.co/edit/susiRn
For a regular html form, I could use java script to validate input onsubmit, which means the submit button is work only for a valid input, hence no http response required.
However, I am unable to do the same thing for a django form.
A Django form in html is simply as {{form}}.
for example {{form.title}} is the form for title.
So I am looking for a way to validate the Django form at front end (in HTML). only the valid input would be post
Not Django specific. Its a frontend Javascript framework Job. Or if you are certain that your webapps's target audience is all latest browser oriented, supporting HTML5, then go for HTML form validations (source) .
If you do not want to go for client side validation and re-use your Django's validation code, then I would suggest serialize and submit the form using ajax. You could get a JSON reply and parse it using javascript, or get the whole updated form back(using Django's template engine) and update the DOM. In case you need a sample, let me know which method you are opting for. Hope this helps.
Include jquery validator
<script type="text/javascript" src="{% static 'js/jquery.validate.min.js' %}"></script>
In contact.html
Loader .gif while you send form
<div id="loadingDiv" class="hiddenClass">
<p><img src="{% static "images/ajax-loader.gif" %}" alt="loader" ><br/>Please wait... while we...<p>
</div>
your form code in contact.html
<form method="post" action="/contact/send/" id="contact_wrap">
<div class="name">
<label class="label">Name <span class="required">*</span></label>
<input name= "firstname" id="firstname" class="inputtext" type="text" maxlength="20" size="12" placeholder="First Name"/>
</span>
</div>
<-- your code -->
</form>
submit button in contact.html
<div class="button">
<input id="submitform" class="submitform" type="submit" name="submitform" value="Send" />
</div>
script to validate form in contact.html
<script>
$(function() {
$( "#contact_wrap" ).validate({
errorClass: "my-error-class", //apply a css class for error if you have style for valid
validClass: "my-valid-class", //apply a css class for error if you have style for error
rules: {
firstname: {
required: true
},
},
messages: {
firstname: {
required: "Please enter your First Name."
},
},
});
});
</script>
To check validation before submit in contact.html
show ajax-loader.gif from loading div
<script>
$( "#submitform" ).click(function() {
if ($('#contact_wrap').valid()) $( "#loadingDiv" ).removeClass( "hiddenClass" ).addClass( "showClass" );
});
</script>
I want to make (an HTML) 'file' input element mandatory: something like
<input type='file' required = 'required' .../>
But it is not working.
I saw this WW3 manual which states 'required' attribute is new to HTML 5. But I am not using HTML 5 in the project I am working which doesn't support the new feature.
Any idea?
Thanks to HTML5, it is as easy as this:
<input type='file' required />
Example:
<form>
<input type='file' required />
<button type="submit"> Submit </button>
</form>
You can do it using Jquery like this:-
<script type="text/javascript">
$(document).ready(function() {
$('#upload').bind("click",function()
{
var imgVal = $('#uploadfile').val();
if(imgVal=='')
{
alert("empty input file");
return false;
}
});
});
</script>
<input type="file" name="image" id="uploadfile" size="30" />
<input type="submit" name="upload" id="upload" class="send_upload" value="upload" />
As of now in 2017, I am able to do this-
<input type='file' required />
and when you submit the form, it asks for file.
You could create a polyfill that executes on the form submit. For example:
/* Attach the form event when jQuery loads. */
$(document).ready(function(e){
/* Handle any form's submit event. */
$("form").submit(function(e){
e.preventDefault(); /* Stop the form from submitting immediately. */
var continueInvoke = true; /* Variable used to avoid $(this) scope confusion with .each() function. */
/* Loop through each form element that has the required="" attribute. */
$("form input[required]").each(function(){
/* If the element has no value. */
if($(this).val() == ""){
continueInvoke = false; /* Set the variable to false, to indicate that the form should not be submited. */
}
});
/* Read the variable. Detect any items with no value. */
if(continueInvoke == true){
$(this).submit(); /* Submit the form. */
}
});
});
This script waits for the form to be submitted, then loops though each form element that has the required attribute has a value entered. If everything has a value, it submits the form.
An example element to be checked could be:
<input type="file" name="file_input" required="true" />
(You can remove the comments & minify this code when using it on your website)
var imgVal = $('[type=file]').val();
Similar to Vivek's suggestion, but now you have a more generic selector of the input file and you don't rely on specific ID or class.
See this demo.
Some times the input field is not bound with the form.
I might seem within the <form> and </form> tags but it is outside these tags.
You can try applying the form attribute to the input field to make sure it is related to your form.
<input type="file" name="" required="" form="YOUR-FORM-ID-HERE" />
I hope it helps.
All statements above are entirely correct. However, it is possible for a malicious user to send a POST request without using your form in order to generate errors. Thus, HTML and JS, while offering a user-friendly approach, will not prevent these sorts of attacks. To do so, make sure that your server double checks request data to make sure nothing is empty.
https://www.geeksforgeeks.org/form-required-attribute-with-a-custom-validation-message-in-html5/
<button onclick="myFunction()">Try it</button>
<p id="geeks"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("gfg");
if (!inpObj.checkValidity()) {
document.getElementById("geeks")
.innerHTML = inpObj.validationMessage;
} else {
document.getElementById("geeks")
.innerHTML = "Input is ALL RIGHT";
}
}
</script>
On one of my websites I have created a form that collects the persons name, email and a description of their idea.
I limited the characters of the description to 500 characters as I don't want to read a ton and I figured out how to have the text appear in the textarea before the user inputs what they want.
Currently the user has to delete "Description of your idea" themselves but I want to add the placeholder class where it deletes what I have written in the textarea when they click the textarea
I have looked on a few sites and couldn't figure out how to use it I placed it in my code, but usually the class just appeared as text inside my textarea.
Any help on using this class would be great thank you
Here is what I have written
Inside the head tags
<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
} else {
limitCount.value = limitNum - limitField.value.length;
}
}
</script>
Inside the body tags
<form name="form1" method="post" action="ideas.php">
Your Name: <input type="text" name="name"><br>
Your Email: <input type="text" name="email"<br>
<textarea name="desc" cols=50 rows=10 onKeyDown="limitText(this.form.desc,this.form.countdown,500);"
onKeyUp="limitText(this.form.desc,this.form.countdown,500);">Description of your idea</textarea><br>
<font size="1">(Maximum characters: 500)<br>
You have <input readonly type="text" name="countdown" size="3" value="500"> characters left.</font>
<br>
<input type="submit" name="Submit" value="Submit!"> </form>
There is a feature in HTML5 called 'placeholders', which produces exactly this feature without you having to do any coding at all.
All you need to do is add a placeholder attribute to your form field, like so:
<input type='text' name='name' placeholder='Enter your name'>
Sadly, of course, only a few browsers currently support it, but give it a go in Safari or Chrome to see it in action. The good news is that it is being added to virtually all browsers in the near future.
Of course, you still need to cater for users with older browsers, but you may as well make use of the feature in browsers that can use it.
A good way to deal with it is to use the placeholder attribute, and only fall back to the Javascript solution if the browser doesn't support the feature. The Javascript solution can take the text from the placeholder attribute, so you only need to specify it in one place.
See this page for how to detect whether the placeholder feature is supported: http://diveintohtml5.ep.io/detect.html
(or, as it says on that page, just use Modernizr)
The Javascript fall-back code is fairly simple to implement. Exactly how you do it would depend on whether you want to use JQuery or not, but here are links to a few examples:
http://www.morethannothing.co.uk/2010/01/placeholder-text-in-html5-a-js-fallback/
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
And of course Google will give you loads more if you search for html5 placeholder fallback or something similar.
Hope that helps.
Check out http://www.ajaxblender.com/howto-add-hints-form-auto-focus-using-javascript.html I think it has what you are looking for.
Here is a simple page that has an email field on it that I quickly put together (pulled mostly from the tutorial).
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Focus auto-focus fields
$('.auto-focus:first').focus();
// Initialize auto-hint fields
$('INPUT.auto-hint, TEXTAREA.auto-hint').focus(function(){
if($(this).val() == $(this).attr('title')){
$(this).val('');
$(this).removeClass('auto-hint');
}
});
$('INPUT.auto-hint, TEXTAREA.auto-hint').blur(function(){
if($(this).val() == '' && $(this).attr('title') != ''){
$(this).val($(this).attr('title'));
$(this).addClass('auto-hint');
}
});
$('INPUT.auto-hint, TEXTAREA.auto-hint').each(function(){
if($(this).attr('title') == ''){ return; }
if($(this).val() == ''){ $(this).val($(this).attr('title')); }
else { $(this).removeClass('auto-hint'); }
});
});
</script>
</head>
<body>
<form>
Email: <input type="text" name="email" id="email" title="i.e. me#example.com" class="auto-hint" />
</form>
</body>
</html>
The title text is put in the field if it's empty, and removed once the user starts typing.