We currently have a heavy reliance on struts2 in our application. One of the challenges we are facing is to eliminate all default struts2 validation and implement HTML5 with CSS validation instead.
For example, when working with a struts2 form:
<s:form id="userForm" action="userAction" method="post" validate="true">
<s:password key="Pwd" required="true" maxlength="128" />
</s:form>
In this scenario, I aim to utilize HTML5 attributes such as "type=password", "required", and pattern="(?=.\d)(?=.[a-zA-Z])\w{7,}", while also implementing CSS validation for these elements. Can anyone provide guidance or a tutorial on how to achieve this? Your help would be greatly appreciated.
I specifically want to address the issues I am encountering with CSS validation.
Below is an example of my struts form:
<s:form id="userForm" action="userAction" method="post" validate="true">
<s:password key="Pwd" type="email" required="true" maxlength="128" id="password" pattern="(?=.*\d)(?=.*[a-zA-Z])\w{7,}"/>
<span class="form_hint">Password should contain,<br>
1.minimum of 7 characters. <br>
2. Must consist of only letters and digits.<br>
3.At least one letter and at least one digit</span>
</s:submit type="button">
</s:form>
I am looking to validate the password field for: 1. Ensuring it is filled out before submission. 2. Meeting the specified pattern criteria, turning the text green if successful.
My CSS code looks like this:
.form_hint {
background: #d45252;
border-radius: 3px;
color: white;
margin-left: 8px;
padding: 1px 6px;
z-index: 999;
position: absolute;
display: none;
}
.form_hint::before {
content: "\25C0";
color: #d45252;
position: absolute;
top: 1px;
left: -6px;
}
#emailId input:focus + .form_hint {
display: inline;
}
#emailId input:required:valid + .form_hint {
background: #28921f;
}
#emailId input:required:valid + .form_hint::before {
color: #28921f;
}
However, when testing the form, only the HTML5 pattern tag attribute seems to work, displaying a message saying "Please enter required format". How can I make my CSS styling effective? What syntax should I use in my CSS file? The selectors "#emailId input:focus + .form_hint", "#emailId input:required:valid + .form_hint", "#emailId input:required:valid + .form_hint::before" do not seem to apply in my form.