Validating form with unpoly - forms

I' trying to validate a form with unpoly. Here my HTML:
<div>
<label for="salesrepresentative-name">Name: </label><br/>
<input id="salesrepresentative-name" name="name" up-validate=".name-errors"/>
<span class="name-errors"></span>
</div>
And the error message what i get is:
Could not find failure target in response (tried [".name-errors", "body"])
Any ideas, what i'm doing wrong?

up-validate will submit the form and replace your current <span class="name-errors"> with the same span from the response.
The error message you received means that the form submission did not include a <span class="name-errors">. If even did not include a <body> tag (which Unpoly uses as a fallback when selectors are missing).
Try to submit the form without Unpoly and see if the response is what you're expecting.

Related

How to insert a long text using the sendKeys Protractor API?

I have a long text 20 lines with HTML code that I need to use into a form test. For small texts I could use something like this:
browser.actions().mouseMove(element(by.id("field_bodytext")).sendKeys("BodyText <h2>Protractor</h2> Text1")).perform();
and it will work fine. But for 20 lines it does not. I have seen this information in Protractor API page, but can not see how to use it in my case:
http://www.protractortest.org/#/api?view=webdriver.WebElement.prototype.sendKeys
var form = driver.findElement(By.css('form'));
var element = form.findElement(By.css('input[type=file]'));
element.sendKeys('/path/to/file.txt');
form.submit();
There is an example for selenium that I do not see how to adapt: Selenium Webdriver enter multiline text in form without submitting it
This is the form field in Angular:
<div class="form-group">Wordhtml.com
<label class="form-control-label" jhiTranslate="jhipsterpressApp.post.bodytext" for="field_bodytext">Bodytext</label>
<textarea type="text" rows="10" cols="50" class="form-control" name="bodytext" id="field_bodytext"
[(ngModel)]="post.bodytext" required minlength="2" maxlength="65000">
<div [hidden]="!(editForm.controls.bodytext?.dirty && editForm.controls.bodytext?.invalid)">
<small class="form-text text-danger"
[hidden]="!editForm.controls.bodytext?.errors?.required" jhiTranslate="entity.validation.required">
This field is required.
</small>
<small class="form-text text-danger"
[hidden]="!editForm.controls.bodytext?.errors?.minlength" jhiTranslate="entity.validation.minlength" translateValues="{ min: 2 }">
This field is required to be at least 2 characters.
</small>
<small class="form-text text-danger"
[hidden]="!editForm.controls.bodytext?.errors?.maxlength" jhiTranslate="entity.validation.maxlength" translateValues="{ max: 65000 }">
This field cannot be longer than 65000 characters.
</small>
</div>
</textarea>
</div>
And the text to be inserted could be something like this:
<h2>What is JHipsterPress?</h2>
<ul>
<li>It is an open source and collaborative project made with Jhipster.</li>
<li>It is a live project that it is explained in its GitHub project. Explained? What do you mean? Whether you are a beginner that wants to find out an example about how to How to open access to the REST Api: or a more advance user who wants to see How to change DTOs to load attributes of not related entities: and see the actual code working, just visit the ReadMe file at GITHUB</li>
<li>And YES, you can use it for your own website.</li>
<li>At the same time JHipsterPress will try to create a community for Jhipster developers to join groups about different topics such as Websockets, Mapstruct, or anything you like.</li>
</ul>
<br />
Put the HTML in quotes `` as #lunin-roman is saying and then call it:
let htmltext = `<h2>What is JHipsterPress?</h2> and so on`;
element(by.id("field_bodytext")).sendKeys(htmltext);
and then use it in the element.sendKeys

Input field with validation crashes when typing fast in Angular 2

I have a form in Angular 2 with a simple validation using Validators.
The html template
<form role="form" #myForm="ngForm" (ngSubmit)="submit()" novalidate [ngFormModel]="form">
<div class="form-group list-element">
<label for="name">name*</label>
<input type="text" name="name" class="form-control" ngControl="name"
#name="ngForm" placeholder="Enter name" [(ngModel)]=user.name >
</div>
</form>
The ControlGroup for the validation
ngOnInit() {
this.form = new ControlGroup({
name: new Control('', Validators.compose([
Validators.required,
Validators.pattern("(([a-zA-Z ]|[0-9])+)*"),
Validators.minLength(5),
Validators.maxLength(80)
]))
});
}
When I type fast (random) characters in the input field (e.g #1KZBZKBjkndedjk###kjbzdzdékj!) the application crashes. This does not happen always so I have not really noticed a pattern.
This is the place where the crash happens, so I think the crash has something to do with the pattern.
That's a known issue https://github.com/angular/angular/issues/7822 and will probably be fixed when this pull request lands https://github.com/angular/angular/pull/7421
First of all this is not related to AngularJS.
This happens because your pattern is wrong I don't know what pattern you need but for example if you need to validate email then use this pattern
& Just Check for your pattern nothing else.
your code....
Validators.pattern("^[_a-z0-9]+(.[_a-z0-9]+)#[a-z0-9-]+(.[a-z0-9-]+)(.[a-z]{2,4})$"),
your code ends...
That it!

Getting error while submitting form data using post method in AEM / CQ

There is a cq page and in the page there are many component. In one component we have HTML form code. After submitting form data ,i need to set all value in PageContext and use these value in other component on same page.
To achieve this I have created component named "MySamplecomponent". and in put all html code as below.Also i have created a POST.jsp under same component.
Mysamplecompnent.jsp code
<%#include file="/libs/foundation/global.jsp"%>
<%
//String collapsed = properties.get("selection","");
String collapsed= request.getParameter("testKey");
out.println("value++"+collapsed);
String category= request.getParameter("skill");
out.println("Category++"+category);
pageContext.setAttribute("collapsed1",collapsed,PageContext.REQUEST_SCOPE);
%>
<form name="form1" id="form1" action="${currentPage.path}.html" method="post">
<input type ="text" name="testKey" id="testKey" value="collapsed" />
<input type ="hidden" name="pathValue" id="pathValue" value="myValue" />
<select name="skill" style="display:block">
<option value="1">Cricket</option>
<option value="2">Volley ball</option>
<option value="3">Tennis</option>
</select>
<input type="radio" name="ravi" id="radiobutton" value="success" > radiobutton<br>
<input id="SubmitButton" name="SubmitButton" type="submit" value="SubmitButton" onclick="javascript:location.href='#'" />
</form>
After clicking on submit button getting below error
Error while processing /content/myPage/
Status
500
Message
javax.jcr.nodetype.ConstraintViolationException: No matching property definition: testKey = collapsed
Location /content/myPage/
Parent Location /content
Path
/content/myPage/
Referer http://localhost:4502/content/myPage.html
ChangeLog
Go Back
Modified Resource
Parent of Modified Resource
First of all, I believe you mean PageContent under PageContext. If you want to use Sling Post Servlet, you need to change the action.
${currentPage.path} refers to Page node and not PageContent node. Page node has pretty strict restrictions for properties and you can not put there any custom props, like testKey. So to make your code work just replace your action attribute with ${currentPage.path}/jcr:content and it will work.
Use JQuery and AJAX. See this article:
http://scottsdigitalcommunity.blogspot.ca/2013/06/posting-form-data-to-adobe-cq-using.html

Grails cache issue with forms in show.gsp (view)

I have this very odd issue and I've picked my code apart and taken out any caching changes that I think would cause this but it still remains.
Here is whats happening:
I add an Address in my app, named "q", I save it and get id 1 for
example.
If I add another address names "q" (q isn't restricted to unique), then save it I get id 2.
If I repeat 2 I get a new item with id 3.
Here is the weird part, if I put the mouse over the Edit button for 2 or 3 it has a link to 1. If I look at the HTML generated I get this section for the form:
<form action="/CRM/address/delete/1" method="post" ><input type="hidden" name="_method" value="DELETE" id="_method" />
<fieldset class="buttons">
Edit
<input type="submit" name="_action_delete" value="Delete" class="delete" onclick="return confirm('Are you sure?');" />
</fieldset>
</form>
If I look at the show.gsp it's just the basic code from the generated scaffold:
<g:form url="[resource:addressInstance, action:'delete']" method="DELETE">
<fieldset class="buttons">
<g:link class="edit" action="edit" resource="${addressInstance}"><g:message code="default.button.edit.label" default="Edit" /></g:link>
<g:actionSubmit class="delete" action="delete" value="${message(code: 'default.button.delete.label', default: 'Delete')}" onclick="return confirm('${message(code: 'default.button.delete.confirm.message', default: 'Are you sure?')}');" />
</fieldset>
</g:form>
The controller has the following action:
def show(Address addressInstance) {
respond addressInstance
}
When i print the addressInstance it looks like the correct one.
Does anyone have any idea why I get ID 1 instead of the proper id in this form which is on the show screen of address 2 and 3???
I've tested it in H2 and PostgreSQL, Grails 2.3.3, locally and on Heroku.
Looks like a bug linkGenerator cache in Grails 2.3.0-2.3.4.
I've created a Jira: http://jira.grails.org/browse/GRAILS-10883
You can disable the cache in your config file:
grails.web.linkGenerator.useCache = false

how to set focus for elements in a spring based application

I have a spring application where i validate all validations in custom spring validator class.
My form has nearly 15 fields.If there is a error in the last field , how to set the focus to that element.
Does spring tags support that. Any technical ideas ? Currently i display my error messages near the fields itself.
It is possible to use spring:bind tag to determine whether a field or the whole model object has error and the overall status of the object after processing (submission).
<spring:bind path="user.username">
<input id="inputId" type="text" name="${status.expression}" value="${status.value}"/>
<c:if test="${status.error}">
<c:forEach items="${status.errorMessages}" var"error">
<span class="field-error">${error}</span>
</c:forEach>
<script type="text/javascript">
document.getElementById('inputId').focus();
</script>
</c:if>
</spring:bind>
Note:
The status variable is exposed by the spring:bind tag.
The javascript part will focus the element when the specific field
has validation errors.
You can set autofocus to all fields that have an error, but your browser will only autofocus (and scroll) to the first one.
<spring:bind path="someFieldName">
<input type="text" name="someFieldName" value="${status.value}" ${status.error?'autofocus="autofocus"':''} />
</spring:bind>
You can't use spring's <form:input /> here as it doesn't work with conditional attributes.
I've used this:
<spring:bind path="*">
<c:if test="${status.error}">
<script type="text/javascript">
window.onload = function(){
document.getElementById('${status.errors.fieldErrors[0].field}').focus();
};
</script>
</c:if>
</spring:bind>
If there is an error it will find the first fieldError and its id and set the focus on that element
forgot to say that the beauty is that you don't need to put this code next to every input. One time is enough per jsp