According to the jQuery Mobile docs, this is how you set up fields in a web form:
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
Is there a best practice or "official" way of adding a validation message to this? I basically want the validation messages to appear under each textbox in my form.
I haven't seen any "official" way of supporting input-validation fields. What we're currently doing though, is using the combination of:
jquery.validate
jquery.unobtrusive.js (not a pre-requisite)
asp.net mvc3 w/ Fluent validation (not a pre-requisite)
Here's an example of what the input-validation looks like for a single field:
<label for="Name" class="ui-input-text">Name Input:</label>
<input data-val="true" data-val-required="Name is required" id="Name" name="Password" type="text" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-d">
<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
jquery.validate then takes care of inserting and displaying the correct message in the validation span. It doesn't support html5 input field-types yet, but I have a branch on github with the necassary changes to support this.
Related
I have a simple login page in my application with username and password fields.
My application is developed by JAVA and it uses Primefaces UI framework.
I have added a Primefaces inputText (p:inputText) for username field and Primefaces password (p:password) for password field.
After the page has rendered in browser, the code probably seems like below.
<div class="text">
<label for="email">E-mail: </label>
<input type="text" id="email" name="email" size="20" aria-required="true" /> *
</div>
<div class="text">
<label id="passwordCtrl" for="last">Password: </label>
<input type="password" id="passwordCtrl" name="password" size="20" aria-required="true" /> *
</div>
When I try to validate the HTML code in https://validator.w3.org/, it showing validation error message as shown below.
To get the code to validate, right click on the page and select View Source, then copy the entire code and paste the code in W3C validator.
Among the two controls, the issue is only with the input[type="password"] control. How to handle this HTML code validation error? Is there any way to achieve this?
Note:
I am using Primefaces UI framework
First of all, I am not asking about using Bootstrap's javascript guide to write tooltips from scratch which is in the docs.
I recently used type="email", along with v3.3.1. It automatically validated and showed awesome tooltips for wrong email. I am looking to extend this to custom fields (type="text" and so on) with least amount of code. Looking at Bootstrap's docs, I didn't find any such documentation.
I am wondering it I can use something that resembles formvalidation.io for validation without writing a ton of javascript combined with above tooltip style.
I can do javascript, but if there's a better way, I would like to know.
Right now, my form is extremely simple, no tooltip Javascript and this works:
<form ng-submit="submit()">
<!--<input type="hidden" name="_token" value="{{ CSRF_TOKEN }}">-->
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" ng-model="data.email" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" ng-model="data.password" id="exampleInputPassword1" placeholder="Password">
</div>
</form>
you can change/edit the message of the tooltip using pattern
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Enter a letter from the english alphabet ')"
onchange="try{setCustomValidity('')}catch(e){}" />
Good Link on patterns right here: it has time and a lot of data types patterns
If you use type="email" the tooltips you see are generated by the browser.
Html5 form validation uses the browser (or os?) language, but I have an English website for mostly Duch users.
So all validation messages should be in English.
How can I change the language for these validation messages?
This is not a duplicate, I know I can set my own custom messages.
I don't need this, I just want to set the correct language, if that's possible.
Use the title tag to display the custom message:
<input type="text" required title="Mijn aangepaste boodschap" />
EDIT
#Denis Chenu is right, this is not the correct solutions, this post has a correct javascript solution: changing the language of error message in required field in html5 contact form
So this is a duplicate and can be closed?
document.getElementById('fname').setCustomValidity('Dit is verplicht kut');
<form>
<label for="fname">First name:</label><br>
<input required type="text" id="fname" name="fname" title="Vul dit veld in kut"><br>
<label for="lname">Last name:</label><br>
<input required type="text" id="lname" name="lname">
<button type="submit">Submit</button>
</form>
I am trying to validate the fields using CFINPUT and then calls a popup window function to do more stuff BEFORE submitting the form but it's not working. The onclick function seems to take precedent over the CFINPUT validation. As soon as I click on the Submit button it's calling the popup window function first without validating the fields. I need it to:
first validate the fields
call the popup function
then submit the form after the popup closes itself
(p.s. I see other similar case on here but there is no answer given)
The code looks like this:
<cfform action="register.cfm" method="post">
<cfinput type="text" name="username" size="50" maxlength="100" required="yes" autofocus="on" validate="noblanks">
<cfinput type="text" name="address" size="50" maxlength="100" required="yes" validate="noblanks">
....
<input type="submit" value=" Send " onclick="popup()">
....
Please help. Thank you.
This is an old blog posting so not sure how accurate things are today but it shows how you can run the CFFORM validation via the _CF_checkTaskForm() function. So it seems like if you change the submitting of the form to a button via <input type="button" value="Send" onclick="popup(this.form)" /> then change the popup function to first validate the form via the _CF_checkTaskForm() and if that passes to proceed with the other JS you are doing.
http://www.neiland.net/blog/article/triggering-cfform-validation-when-using-ajax/
To expand on that, I just looked at a CF8 and CF11 installations and looks like the function in those is _CF_checkCFForm_1 if using that version of CF then something like this should get you in the correct direction:
<script>
popup = function(formreference) {
var check = _CF_checkCFForm_1(formreference);
if (!check) {
//if the rules failed then do not submit the form
return false;
} else {
// Do the popup
}
}
</script>
<cfform action="register.cfm" method="post">
<cfinput type="text" name="username" size="50" maxlength="100" required="yes" autofocus="on" validate="noblanks">
<cfinput type="text" name="address" size="50" maxlength="100" required="yes" validate="noblanks">
<input type="button" value=" Send " onclick="popup(this.form)" />
</cfform>
The cfinput validation you're attempting to do is the client-side equivalent to
<cfif len(trim(string)) gt 0>
(Edit: That is not to imply that you should depend wholly on client side validation. Client-side validation is more of a feature to help your visitors. Server side validation is still important.)
Which I have to say is really weak validation. Anything consisting of at least 1 non-whitespace character will pass the test. People will be able to have usernames like "!" which isn't fanstastic, but that's just some information.
On the jQuery Validate link you provided, they show an example form (along with a link of the same form in action)
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
<script>
$("#commentForm").validate();
</script>
This very basic example shows how simple Validate can be to install, and a simple format of
<input name="ele" type="text" required>
is exactly the same level of validation you're attempting. So, to begin with, you can almost copy and paste the code. (Aside from from the different requirements you can make, setting minlength requires a certain number of characters and requires that at least one not be whitespace).
jQuery Validate can get quite extensive but is very easy to basically install and once you become familiar, make custom classes as needed
As a final note, don't disregard the disdain for CFForm elements. It may seem like others are disregarding your question, but that's not the case.
To be honest, they began to be introduced at a different time in the life of the internet, but have always been kind of finicky to work with. Expansion to them, in the opinions of many, have not been done well and have frequently exasperated the flaws.
It's super attractive to be able to say <cfinput...required> but the tags become a nuisance and you don't easily have the fine control over them that you might desire. They're a crutch, and a rusty crutch at that.
You might check out CFUI The Right Way # Github or this hosted version for some great insight and examples.
I am now implementing a client side using Angular for a Django REST Framework backend.
In order to get the Alpha of the project up and running in the briefest time, we decided to use the server side validation directly.
Django rest returns a JSON string with one to one correspondence between the fields and the errors.
This feature of Django could allow me to implement such a feature in jQuery in several minutes.
The question is how do I do it with angular?
Code example:
form:
<label for="uname">Login:</label>
<div class="inputUnit" name="email">
<input tpye="email" class="text" name="email" ng-model="formData.email">
</div>
<label for="password">password:</label>
<div class="inputUnit">
<input type="password" class="text" name="password" ng-model="formData.password">
</div>
JSON response from the server in case both of the fields are empty:
{"password": ["This field is required."], "email": ["This field is required."]}
JSON response from the server in case the password is missing and email doesn't match regex:
{"password": ["This field is required."], "email": ["Enter a valid e-mail address."]}
What is the best practice to implement a generic component to display those error to the user?
The desired HTML after displaying the errors:
<label for="uname">Login:</label>
<div class="inputUnit" name="email">
<input tpye="email" class="text" name="email" ng-model="formData.email">
<label for="error">Email error here</lable>
</div>
<label for="password">password:</label>
<div class="inputUnit">
<input type="password" class="text" name="password" ng-model="formData.password">
<label for="error">Password error here</lable>
</div>
Here you could find my attempt to handle server side validation errors with the directive https://github.com/9ci/angle-grinder/blob/c0211c885c561f8ec820b38d506135f4fb8b6dfb/app/scripts/modules/forms.coffee#L321 I hope it would be useful for you.