I have a basic table with radio buttons. I have an onclick even in the "td" that checks the radio when the "td" is clicked. The error message does not hide when the "td" is clicked. It only hides when the actual button is clicked. Here's my code. Any ideas? I have the jquery files stored locally.
<html>
<head>
<script src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#myform").validate({
errorPlacement: function(error, element) {
error.appendTo(element.parent("td").prev("td") );
},
debug:true
})
});
</script>
</head>
<body>
<form id="myform" action="/login" method="post">
<table border="1">
<tr>
<td width="30%">Attribute 1<br /></td>
<td width="10%" onclick="$(this).find('input:radio').attr('checked','checked');" /><INPUT type="radio" id="22121GRID" name="SPGRID_1" value="5" class="required" /></td>
<td width="10%" onclick="$(this).find('input:radio').attr('checked','checked');" /><INPUT type="radio" id="22121GRID" name="SPGRID_1" value="4" class="required" /></td>
<td width="10%" onclick="$(this).find('input:radio').attr('checked','checked');" /><INPUT type="radio" id="22121GRID" name="SPGRID_1" value="3" class="required" /></td>
<td width="10%" onclick="$(this).find('input:radio').attr('checked','checked');" /><INPUT type="radio" id="22121GRID" name="SPGRID_1" value="2" class="required" /></td>
<td width="10%" onclick="$(this).find('input:radio').attr('checked','checked');" /><INPUT type="radio" id="22121GRID" name="SPGRID_1" value="1" class="required" /></td>
</tr>
<tr><td><input type="submit" value="Submit" /></td></tr>
</table>
</form>
</body>
</html>
Since you changing the checked through javascript, call .valid() method of validator.
You can use the following
<td width="10%" onclick="$(this).find('input:radio').attr('checked','checked').valid();" /> <INPUT type="radio" id="22121GRID" name="SPGRID_1" value="5" class="required" /> </td>
or
$('td').click(function(){
$(this).find('radio').attr('checked','checked').valid();
});
Related
My JSP code is: feedback.jsp
Customer Feedback
<tr><th>Name</th><td>
<spring:bind path="cust.name">
<input name="name" type="text" id="name" class="form-control" value="${pdet.register_fname} ${pdet.register_lname}" pattern="[A-Za-z\s]{1,15}"
title="Name should contain min of 1 and max of 15 characters!"required/>
</spring:bind>
</td><td>
<p id="demo" cssClass="error" />
<springform:errors path="name" cssClass="error" />
</td></tr>
<tr><th>Email</th><td>
<spring:bind path="cust.emailid">
<input name="emailid" type="email" id="emailid" class="form-control" value="${pdet.username}" pattern="[a-zA-Z0-9._%+-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$" title="Please enter a valid email address." required size="40"/>
</spring:bind>
</td><td>
<p id="demo" cssClass="error" />
<springform:errors path="emailid" cssClass="error" />
</td><td style="border:0; color: red; position: fixed;">${msg}</td></tr>
<tr><th>Mobile Number</th><td>
<spring:bind path="cust.mobileno">
<input name="mobileno" type="text" id="mobileno" class="form-control" pattern="[0-9]{6,10}" title="Mobile number of minimum of 6 and maximum of 10 digits" value="${pdet.register_mno} " />
</spring:bind>
</td><td>
<p id="demo" cssClass="error" />
<springform:errors path="mobileno" cssClass="error" />
</td></tr>
<tr><th>Description</th><td>
<spring:bind path="cust.description">
<textarea name="description" rows='3' id='description' class="form-control" title="cust_comment" required></textarea>
</spring:bind>
</td> </td><td>
<p id="demo" cssClass="error" />
<springform:errors path="description" cssClass="error" />
</td></tr>
#RestController code:
#RequestMapping(value="/customer/new", method= RequestMethod.POST, headers = "Accept=application/json" )
public ResponseEntity addCustomer(#RequestBody feedbackRepo customer, UriComponentsBuilder ucb){
feedback f=new feedback();
customer.setName(f.getName());
customer.setEmailid(f.getEmailid());
this.pmService.saveCustomer(customer);
HttpHeaders headers=new HttpHeaders();
headers.setLocation(ucb.path("/customer/{id}").buildAndExpand(customer.getIssueid()).toUri());
return new ResponseEntity<Void>(HttpStatus.CREATED);
}
After clicking the submit button, it is not hitting my managed bean, but it is not displaying the validation message either. I feel like this is very simple and do not know why it would not be working.
<h:form prependId="false">
<table class="contactForm">
<tr>
<td>Name: </td>
<td><p:inputText size="20" id="name" value="#{contactManagedBean.name}" required="true" requiredMessage="Name is required" /></td>
<td><p:message for="name" /></td>
</tr>
<tr>
<td>Email: </td>
<td><p:inputText size="20" id="email" value="#{contactManagedBean.email}" required="true" requiredMessage="Email is required" /></td>
<td><p:message for="email" /></td>
</tr>
<tr>
<td>Phone (###-###-####) (Optional): </td>
<td><p:inputText size="20" id="phone" maxlength="12" value="#{contactManagedBean.phone}"/></td>
<td><p:message for="phone" /></td>
</tr>
<tr>
<td>Comments: </td>
<td><p:inputTextarea rows="5" cols="30" id="comments" value="#{contactManagedBean.comments}" required="true" requiredMessage="Please enter some comments"></p:inputTextarea></td>
<td><p:message for="comments" /></td>
</tr>
<tr>
<td colspan="3" style="text-align: center;"><p:commandButton value="Submit" actionListener="#{contactManagedBean.submitComment()}" /></td>
</tr>
</table>
</h:form>
add id to h:form and add update attribute to button.
ex:
<h:form id="form">
...
<p:commandButton value="Submit" update="form" actionListener="#{contactManagedBean.submitComment()}" />
</h:form>
So here's what I'm working with: http://shaneboland.com/ms2/contact.html
but this is what I want: http://shaneboland.com/ms2/test.jpg
I have one div that contains my form:
<div id="wrapper">
<div id="content-pad">
<div id="mid-col-wide">
<form name="contactform" method="post" action="contact/send_form_email.php">
<table width="450px">
<tr>
<td valign="top">
<label for="first_name">Full Name *</label>
</td>
<td valign="top">
<input type="text" name="full_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="comments">Message *</label>
</td>
<td valign="top">
<textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</div><!-- //mid-col -->
</div><!-- //content-pad -->
</div><!-- //wrapper -->
and then I have a separate div that contains an image map with multiple links:
<div align="center">
<img name="emp" src="contact/main.jpg" usemap="#ep" alt="Mammal Swag" width="940" height="801" border="0"/>
<map name="ep">
<area shape="poly" coords="20,144,176,159,183,222,42,223,20,144" href="about.html" onMouseOver="changeabout()" onMouseOut="changemain()"/>
<area shape="poly" coords="49,228,184,228,192,289,118,315,36,265,49,228" href="index.html" onMouseOver="changecontact()" onMouseOut="changemain()"/>
<area shape="poly" coords="675,639,692,607,773,607,754,713,693,712,675,639" href="http://www.facebook.com/MammalSwag" onMouseOver="changefacebook()" onMouseOut="changemain()"/>
<area shape="poly" coords="185,159,370,149,320,243,199,285,185,159" href="index.html" onMouseOver="changehome()" onMouseOut="changemain()"/>
<area shape="poly" coords="821,536,877,626,766,694,779,606,821,536" href="http://www.twitter.com/MammalSwag" onMouseOver="changetwitter()" onMouseOut="changemain()"/>
</map>
</div>
I want to make it so that my contact form div, stays positioned inside that big green space. So when the window is resized, the contact form div, is still in the same spot INSIDE of the green space.
How do I make my contact form div resize with my image map?
I'm new to Spring and I've been having some trouble trying to show a form errors.
I have the following form:
<form:form action="loginform.html" commandName="loginForm" onsubmit="goWait();">
<table><tr>
<td>User Name: </td>
<td><form:input path="userName" /></td>
</tr>
<tr>
<td>Password: </td>
<td><form:password path="password"/> </td>
<tr>
<td colspan="2">
<input type="submit" value="Login" style="butt-login">
</td>
</tr>
</table>
</form:form>
The form, as can be seen, is backed by a LoginForm Bean that validates it.
I want to show all the errors from the validation, outside this form. Something like this:
<div>
<ul>
<li><form:errors path="userName"/></li>
<li><form:errors path="password"/></li>
</ul>
</div>
This div should be outside the , so I can't use the tag.
How can I do this?
You could just capture the html produced by form:errors and display it somewhere after the form:
<form:form ...>
<c:set var="err">
<form:errors path="*" element="div" id="err" cssClass="hidden" />
</c:set>
</form:form>
....
<c:out value="${err}" />
If you want to show the errors before the form, you can do that with a bit of jQuery
Yes, you can user form:errors tag outside form:form tag
<form:errors path="yourBindedObject.*" />
<form:form action="loginform.html" commandName="loginForm" onsubmit="goWait();">
<table><tr>
<td>User Name: </td>
<td><form:input path="userName" /></td>
</tr>
<tr>
<td>Password: </td>
<td><form:password path="password"/> </td>
<tr>
<td colspan="2">
<input type="submit" value="Login" style="butt-login">
</td>
</tr>
</table>
</form:form>
If you want to show all errors associated with any fields just pass a star to the path attribute.
<form:errors path="*" />
But if you want to show global error messages just pass an empty string:
<form:errors path="" />
More information related: http://www.mkyong.com/spring-mvc/spring-mvc-form-errors-tag-example/
I have jsp using struts bean tag library:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>
<body>
<p><a class="colorGrey" href="Welcome.do">
<bean:message key="menu.label" />
</a> >><bean:message key="menu.link.addnews" /> </p>
<p><br>
</p>
<html:form action="/NewsSave">
<table width="100%" border="0">
<tr>
<td class="colorGrey" width="164" height="35">
<bean:message key="body.news.title" /> </td>
<td width="577">
<html:text property="newsTitle" size="40" value=""/> </td>
</tr>
<tr>
<td colspan="2">
<html:errors property="newstitle" />
</td>
</tr>
<tr>
<td class="colorGrey">
<bean:message key="body.news.date" /> </td>
<td>
<html:text property="newsDate" size="10" value=""/> </td>
</tr>
<tr>
<td height="21" colspan="2" valign="top">
<html:errors property="newsdate" />
</td>
</tr>
<tr>
<td class="colorGrey" height="61" valign="top">
<bean:message key="body.news.brief" /> </td>
<td valign="top">
<html:textarea property="brief" cols="40" rows="6" value=""/>
</td>
</tr>
<tr>
<td height="23" colspan="2" valign="top"><html:errors property="brief" /></td>
</tr>
<tr>
<td class="colorGrey" height="100" valign="top">
<bean:message key="body.news.content" />
</td>
<td valign="top">
<html:textarea property="content" cols="40" rows="12" value=""/>
</td>
</tr>
<tr>
<td height="23" colspan="2" valign="top">
<html:errors property="content" />
</td>
</tr>
</table>
<html:submit value="SAVE"/>
</html:form>
<form method="POST"
action="Link.do?method=newsList"
onsubmit="return confirm('<bean:message key="body.onsubmit.cancel" />')">
<input type="submit" value="CANCEL">
</form>
And I use validator plugin, which means that after receiving incorrect info it gives message bellow text field telling what's wrong. But problem is that everything disappear after submiting. So it no info in text or text-areatags. I know that it happens because of value="". But I have another page with the same fields for adding info, which should be clear from the beginning. And if I remove value="", the info from this fields will be displayed on that page after forwarding. So
What should I do to clear info from forms after forwarding to
another page?
How to make info remain after success validation?
As you mentioned, you should remove value="" as this is setting the fields to empty. If you want to clear the values then you should do this in the Action class in which your Form bean is populated.
If you are finding that your Form beans are retaining their values between requests then check that they are request scope: the scope attribute of the action element should be "request" in struts.config