As an example, think about the following simple form with primefaces input components some of which are required:
<h:form id="person">
<h:panelGrid columns="2">
<p:outputLabel for="inputFN" value="First Name"
indicateRequired="auto" />
<p:inputText id="inputFN" required="true"
placeholder="First Name right here please." />
<p:outputLabel for="inputLN" value="Last Name"
indicateRequired="auto" />
<p:inputText id="inputLN" required="true"
placeholder="Last Name right here please." />
<p:outputLabel for="inputBD" value="Date of Birht"
indicateRequired="auto" />
<p:calendar id="inputBD" required="false"
placeholder="Please kindly let us know the very starting point in time of your existence!" />
<p:outputLabel for="inputFC" value="Favourite Color"
indicateRequired="auto" />
<p:inputText id="inputFC" required="false"
placeholder="What is your favourite colour?? Green? Yellow? Please!" />
<p:outputLabel for="inputFH" value="Favourite Hobby"
indicateRequired="auto" />
<p:autoComplete id="inputFH" required="true"
placeholder="Your favourite hobby? Stackoverflow I bet!" />
</h:panelGrid>
(*) these fields are vital! Don't even think about submission when empty!
</h:form>
The rendered output of inputFN (required), inputFC (not required) and inputFH (required) looks like this:
<input id="person:inputFN" name="person:inputFN" type="text" placeholder="First Name ..." aria-required="true"
class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all"
role="textbox" aria-disabled="false" aria-readonly="false">
<input id="person:inputFC" name="person:inputFC" type="text" placeholder="What is your favourite colour?..."
class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all"
role="textbox" aria-disabled="false" aria-readonly="false">
<input id="person:inputFH_input" name="person:inputFH_input" type="text"
class="ui-autocomplete-input ui-inputfield ui-widget ui-state-default ui-corner-all ui-state-error"
autocomplete="off" placeholder="Your hobby? ..." value="" role="textbox"
aria-disabled="false" aria-readonly="false" aria-autocomplete="list">
I don't see a chance to have a CSS selector catching only the required fields. Note that not all required components get the aria-required="true" suggested to use by #Malloware. For example the p:autocomplete inputFH doesn't.
As we have plenty of input components distributed in views and (nested) composite components and the required attribute is sometimes determined dynamically plus I am lazy, I'd like to not touch each and every component and add a styleClass="#{something.isRequired ? 'required' : ''}" to it.
Is there a clean way to globally enable client side distinction of required vs optional fields?
What I finally want to achive is to highlight the placeholders (using the ::placeholder CSS selector) of all required fields by color, as an addition to the indicateRequired kindly provided by p:outputLabel.
Just use this CSS selector. Gauranteed to work for all PF input fields for PF 7.0or higher.
input[aria-required="true"] {
color: red;
}
Related
I want to create a JSF form where users can write their name and surname and validate them using JSF validators. The problem is that I would like to set the same space between the 2 inputText boxes in the form, in both cases, when the typed data is correct according to the validator, and when it is not correct. So if between the 2 inputText boxes there are X pixels if the user has not typed anything, when typed name is not correct, the error showing message should be displayed between the 2 inputText boxes and the pixels between them should be also X px. I suppose this is a CSS issue, but I am unable to get it, so any help would be appreciated.
Here is my code
<h:form>
<p:panel id="panelregister">
<h:panelGrid columns="1">
<!--Name-->
<p:inputText id="name" label="name" size="32" maxlength="9"
value="#{mManagedBean.name}">
<f:validator validatorId="packagevalidators.NameValidator"/>
</p:inputText>
<p:watermark for="name" value="Name (*)" />
<p:message for="name"/>
<!--Surname-->
<p:inputText id="surname" label="surname" required="true" size="32" maxlength="9"
value="#{mManagedBean.surname}"
requiredMessage="Must enter a surname">
<f:validator validatorId="packagevalidators.SurnameValidator"/>
</p:inputText>
<p:watermark for="surname" value="Surname (*)" />
<p:message for="surname" />
<p:commandButton value="Submit" action="#{mManagedBean.save}" ajax="false" />
</h:panelGrid>
</p:panel>
</h:form>
You are using h:panelGrid which renders as HTML <table>.
p:message will be rendered as div and by default that div won't have any content so it won't take any space you provide.
One way to do this is to use a h:panelGroup around it and give pre defined height of p:message
Example:
<h:panelGroup layout="block" style="height:27px">
<p:message for="name" />
</h:panelGroup>
In knockout.js I have a data-bind as follows
<input id="lbl" type="text" data-bind="value: $data.quantity" />
here I would like to have a condition like if $data.quantity is 0 i need to bind with empty text so can some one help me
Just use a ternary expression:
<input id="lbl" type="text" data-bind="value: quantity() ? quantity() : ''" />
The above assumes that your quantity property is an observable, if it's not:
<input id="lbl" type="text" data-bind="value: quantity ? quantity : ''" />
See Fiddle
I'm writing a program in Java that submits a form using WebDriver. There is a method findElement that allows you to select elements using class name, css selector, id, link text, name, partial link text, tag name, or xpath.
Here's the button that I want to select:
<div class="editable" style = "width:82px;float:right;margin-right:10px;">
<a href="#" onclick="$('order_form').submit(); return false;" class="btn">
<img class="btn" src="/myhuds/images/rd_images/btn_place_order.gif" alt="Place Order" width="82" height="17" border="0">
</a>
</div>
I can't use class name because there are multiple buttons on the page. Any ideas on how I might go about using the findElement method to select this button?
Thanks!
Try using this. You can add some browser plugin to get XPath.
driver.findElement(By.xpath("Your XPath"));
You can add an id to the button (may be to all buttons in your page) and find as -
driver.findElement(By.id("Your ID"));
Use CSS selectors. You can find a short explanation here W3, and couple examples here :Examples.
Therefore, try to use driver.findElement(By.cssSelector(...));
For your specific case you can search based on img #alt attribute using XPath
driver.findElement(By.xpath("//img[#alt='Place Order']")).click();
Step 1:
With the available DOM Structure Generate CSS Selector for the "Place Order"
Image
css=a[onclick*='order_form'] > img[src*='btn_place_order.gif']
Then Perform Click on "Place Order" Image.
driver.findElement(By.cssSelector("a[onclick*='order_form'] > img[src*='btn_place_order.gif']")).click();
Following example should help:
Html File:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h1 class="page-header">Login</h1>
<ul class="errors"></ul>
<div>
<form class="login-form" action="checkLogin.html" method="post">
<label for="username-field">Username1</label>
<input type="text" name="username" class="username-field" />
<br />
<label for="password-field">Password1</label>
<input type="password" name="password" class="password-field" />
<br />
<input type="submit" value="Submit" />
</form>
</div>
<div>
<form class="login-form" action="checkLogin.html" method="post">
<label for="username-field">Username2</label>
<input type="text" name="username" class="username-field" />
<br />
<label for="password-field">Password2</label>
<input type="password" name="password" class="password-field" />
<br />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
To locate the input field for Password1 :
WebElement passwordField1: driver.findElement(By.cssSelector("div:nth-child(3) .password-field"));
To locate the input field for Password2 :
WebElement passwordField2: driver.findElement(By.cssSelector("div:nth-child(4) .password-field"));
Learn more about nth-child() selectors here.
When use ASP.NET MVC 3 Razor, it can't reader validate meta info in HTML tag.
<textarea rows="2" name="Title" maxlength="100" id="Title" cols="20"
class="textbox inp-widx6 tit-2">
50% OFF Andrew Christian Olympic Deep V Tee, now only £16.34
</textarea>
If use Html.TextBoxFor(x=>x.Title) will reader below content.
<input type="text"
value="50% OFF Andrew Christian Olympic Deep V Tee, now only £16.34"
name="Title" maxlength="100" id="Title"
data-val-required="Product title is required."
data-val-length-min="50" data-val-length-max="100"
data-val-length="The Title must be at least 50 characters &
no more than 100 characters." data-val="true" class="textbox inp-widx6 tit-2" />
Just reconfirm you have following all steps mentioned steps.
http://www.codeproject.com/Articles/422573/Model-Validation-in-ASP-NET-MVC
Label tag coding style.
Can I write my label tag like this.
<input type="text" name="lname" id="ln" />
<label for="ln">Last Name:</label>
Instead of like this.
<label for="ln">Last Name:</label>
<input type="text" name="lname" id="ln" />
Yes, although it is bad practice.
UI design conventions place labels before controls (unless those controls are radio buttons or checkboxes)