In my website contact form. I have received email. but there are some HTML tags included in email.
Can you please provide any solution like validation (special symbol are not allowed) etc....
Check if this suits your needs.
You just need to add
required pattern = "[a-zA-Z0-9 ]+"
attribute to your input-textbox.
This will allow upper-case/lower-case text, numbers and spaces only.
<!DOCTYPE html>
<html>
<form>
<label>Name*</label>
<input type="text" name="name" class="field" required pattern="[a-zA-Z0-9 ]+" />
<input type="submit"/>
</form>
</html>
You can validate with javascript while submitting the form call below function onsubmit. like below.
function Validate() {
str = (document.getElementById('TextBox')).value;
if (str.match(/([\<])([^\>]{1,})*([\>])/i) == null) {
// valid text entered
}
else {
// not valid
}
}
Related
I have a input field, which will record the response of the end-user. Say the label of it is Linkedin URL. The user who has to enter the linkedin URL could enter some other input(facebook.com/satyaram2k14), which is not invalid. So how can one check, if the url entered contains string 'linkedin.com' along with other text. Final url should be 'linkedin.com/satyaram2k14'. How can I check for this pattern at front-end.
There are several approaches you can take:
Rely on the HTML5 form validation via required and pattern attributes
Validate the input value via JavaScript on form validation
Optionally provide a visual hint on the (in)valid state of the field content
HTML5 validation works in any modern browser and integrates into the browser UI (including localisation of error messages). But it's not as flexible and the helpfulness of the error message given when the pattern does not match varies from browser to browser.
In any case, you should always validate user input on the server side as well, because any client validation can be circumvented.
Here are some code examples of all three approaches. They all use the RegEx pattern ^https?://(www\.)?linkedin\.com, so they'll allow http or https protocol and urls with or without "www.".
var form = document.getElementById('form');
var field = document.getElementById('url');
var fieldstatus = document.getElementById('fieldstatus');
var regExPattern = new RegExp('^https?://(www\.)?linkedin\.com', 'i');
// validation on form submit
form.addEventListener('submit', function(ev) {
if (!regExPattern.test(field.value)) {
ev.preventDefault();
alert('The input value does not match the pattern!');
}
});
// validation on input
field.addEventListener('input', function() {
if (!regExPattern.test(field.value)) {
fieldstatus.innerHTML = 'invalid';
} else {
fieldstatus.innerHTML = 'valid';
}
});
<h1>HTML5 validation pattern</h1>
<form>
<input type="text" pattern="^https?://(www\.)?linkedin\.com" required /><br>
<input type="submit" />
</form>
<h1>Custom JavaScript validation</h1>
<form id="form">
<input type="text" id="url" /> <span id="fieldstatus">invalid</span><br>
<input type="submit" />
</form>
One quick way of doing this is by using the pattern attribute of input, like so:
<input type='text' pattern='^linkedin\.com/'>
^linkedin\.com/ being a regular expression that matches all strings that start with linkedin.com/.
Using this attribute, the browser by itself will only accept such strings.
How, using HTML, can I create a text input or password input on a <form> that has a specific value eg : "apples" and the form will not submit unless the person entering their info into the form enters "apples" into that text (or password) input area?
Make sure the input control is required, and use a validation pattern consisting only of the word apple.
<html>
<head>
<script>
function get(eId) {return document.getElementById(eId);};
function verify(eId, eVal) {
if (eVal !== get(eId).value) {
alert('input must contain "' + eVal + '"!');
return false;
}
else return true;
};
function verifySubmit(eId,eVal) {
if (verify(eId,eVal)) get(eId).parentNode.submit();
};
</script>
</head>
<body>
<form action="https://google.com">
<label>enter "apples": </label><input id="apple" type="text" onchange="verify(this.id,'apples');" />
<input type="button" value="submit" onclick="verifySubmit('apple','apples');" />
</form>
</body>
</html>
Here is a form with angularjs.
<!DOCTYPE html>
<html lang="en">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="formController">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user }}</p>
</div>
<script>
function formController ($scope) {
$scope.master = {firstName:"John", lastName:"Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}
</script>
</body>
I am not familiar with AngularJS, I found the expression {{user}} display as a json like format data which was binded to the textbox. I want to know is there any way to post {{user}} as json directly to the server side. I know I can easily post the form. But my purpose is the page may have a lot of textbox. I want to store it using json, just like {{user}} and submit as a combined one.
And I also want to know how to remove one value in the expression. i.e. the following code has two attribute firstName and lastName. Is there a way like remove(), after call it. I can remove one attribute in the correspond json data.
Thanks a lot
you can post your modal (user in this case) directly as JSON using $http .
In case all you text fields are saved in the user modal then u can remove one of the attributes by calling the below function before submitting the form
$scope.remove = function (user) {
delete $scope.user.firstName;//the output here is user with only lastname
}
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.