ajax field validation in struts2 not reloading the same form - validation

I've been trying to use the field-validation framework in Struts2 and have it implemented. The problem is when doing an AJAX call with jquery tags, it targets a resulting div when I want to reload the same page with the fielderror.
<div class="myform">
<s:form id="userForm" action="users" theme="simple">
<h1>Search for Users</h1>
<p><s:fielderror /></p>
<label>Username
<span class="small">Add your name</span>
</label>
<s:textfield id="username" name="username"/>
<label>Point Minimum
<span class="small">Min. 0 points</span>
</label>
<s:textfield name="pointMin"/>
<label>Point Maximum
<span class="small">Max. 5000 points</span>
</label>
<s:textfield name="pointMax"/>
<label>Rate Minimum
<span class="small">Percentage</span>
</label>
<s:textfield id="rateMin" name="rateMin"/>
<label>Rate Maximum
<span class="small">Percentage</span>
</label>
<s:textfield id="rateMax" name="rateMax"/>
<s:hidden name="searchButtonHit" value="%{true}"/>
<sj:a formIds="userForm"
targets="listingDisplay"
button="true"
validate="only"
type="submit"> Search
</sj:a>
<div class="spacer"></div>
</s:form>
</div>
<div class="spacer"></div>
<div id="listingDisplay"></div>
The <sj:a> tag targets the listingDisplay div so the fielderror as well as the same form is loaded underneath which looks very strange. Is there a better way of doing this? Thanks!

Have a look at the below validation link. It adds a string errorhere to the error message and checks for it after response. You can also do this to reload the page and the reload code can be written in 's onSuccessTopics.
Ajax Validation
Method 2
Very simple but may not work on all browsers.
Set the targets attribute of
<sj:a targets="myform">
to the same div, within which the form exists.

Related

thymeleaf 3 form action URL with parameters and get method not working

I am using Thymeleaf 3 in Spring Boot 2 web app. Below is the form code:
<form data-th-action="#{/props/r(pg=3)}" method="get">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="pt" id="p1" value="pr">
<label class="form-check-label" for="p1">P1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="pt" id="p2" value="pr2">
<label class="form-check-label" for="p2">P2</label>
</div>
<button type="submit" class=" mb-4">Search</button>
</form>
Unfortunately when I used method get for the form, it does not append ?pg=3 in the submitted URL, the URL looks like /props/r? if no checkbox is selected. If checkbox is selected the URL looks like /props/r?pt=p1
the pg=3 part is missing.
How to fix this problem?
The problem is that you have an action #{/props/r(pg=3)} -- which translates to /props/r?pg=3 and your form is also method get. If you have parameters in both the action and the body of the form (and usemethod="get"), browsers will not combine them. Instead, the parameters of the action are removed and replaced with the paramters in the body of the form.
This is why ?pg=3 is removed and replaced with the checkbox parameters. Either use post instead, or include pg as a hidden form element.
Instead of putting pg as parameter at the form url, consider putting it inside a hidden field like below.
<input type="hidden" name="pg" value="3">

Angular material 2 share reactive form between components

I have the following component template
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<section>
<mat-form-field>
<input matInput formControlName="firstName" placeholder="First name" />
</mat-form-field>
</section>
<child-component [form]="form"></child-component>
<button type="submit" mat-raised-button color="primary">
<span>Submit</span>
</button>
</form>
And the following child component template
<section [formGroup]="form">
<mat-form-field>
<input matInput formControlName="emailAddress" placeholder="Email address" />
</mat-form-field>
</section>
Both fields are defined using reactive approach in the parent component and set as required.
When submitting the form, only the field inside the parent component has class mat-form-field-invalid and is shown in red.
Both fields appear as invalid at FormControl instance though.
I have created the following stackblitz to reproduce the issue
https://stackblitz.com/edit/angular-material2-issue-7x45bp
If I'm not mistaken, your invalid form fields will only appear in red after they have been marked as touched, which you can force programtically on form submit if you so wish (just not so elegant, Reactive Forms - mark fields as touched).
Your required fields are missing the asterisk that usually exists next to the form field name to visually indicate that the field is required. To add that just add required="true" or alternatively [required]="someFunctionThatChecksFieldHasRequiredValidatorInFormGroup(fieldName)"
The easiest way to do this is to pass in the FormControl instead of the form:
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<section>
<mat-form-field>
<input matInput formControlName="firstName" placeholder="First name" />
</mat-form-field>
</section>
<child-component [childControl]="form.get('emailAddress')"></child-component>
<button type="submit" mat-raised-button color="primary">
<span>Submit</span>
</button>
</form>
<section>
<mat-form-field>
<input matInput [formControl]="childControl" placeholder="Email address" />
</mat-form-field>
</section>
This is actually better for component re-usability anyway (if you also make placeholder a property).
Otherwise, you would probably need to have your child component implement ControlValueAccessor.

Gravity Forms Ajax Not Working

Using Gravity Forms 1.8.1 , no other plugins activated.
Tested also with latest build 1.9.2
Tested using Divi theme, as well as 2015 theme with same results.
Tested in Chrome and Firefox with same results.
Added the following shortcode:
[gravityform id="1" name="test-form-1" ajax="true"]
The form submits, but always with non-ajax and refreshes the page. I can tell this by looking at the tab and viewing the 'Net' tabs in Chrome's developer tools and Firebug in Firefox. The XHR requests are empty, and the requests clear and post normally as they would if it was a non-ajax request.
This should work. I get no errors or conflicts when looking at Firebug's console tab. I found no one experiencing similar problems although not really sure how many gravity form users are paying attention to the behavior in firebug.
I'm sure I'm missing something obvious. Let me know what it is!
Relevant form code generated by Gravity Forms
<div id="gform_wrapper_1" class="gf_browser_gecko gform_wrapper">
<a class="gform_anchor" name="gf_1" id="gf_1"></a>
<form action="/sandbox/#gf_1" id="gform_1" target="gform_ajax_frame_1" enctype="multipart/form-data" method="post">
<div class="gform_heading">
<h3 class="gform_title">test-form-1</h3>
<span class="gform_description"></span>
</div>
<div class="gform_body">
<ul class="gform_fields top_label description_below" id="gform_fields_1">
<li class="gfield gfield_contains_required" id="field_1_1">
<label for="input_1_1" class="gfield_label">Name<span class="gfield_required">*</span></label>
<div class="ginput_container"><input type="text" tabindex="1" class="medium" value="Joe Smith" id="input_1_1" name="input_1"></div>
</li>
</ul>
</div>
<div class="gform_footer top_label"> <input type="submit" onclick="if(window["gf_submitting_1"]){return false;} if( !jQuery("#gform_1")[0].checkValidity || jQuery("#gform_1")[0].checkValidity()){window["gf_submitting_1"]=true;} " tabindex="2" value="Submit" class="button gform_button" id="gform_submit_button_1"><input type="hidden" value="form_id=1&title=1&description=1&tabindex=1" name="gform_ajax">
<input type="hidden" value="1" name="is_submit_1" class="gform_hidden">
<input type="hidden" value="1" name="gform_submit" class="gform_hidden">
<input type="hidden" value="" name="gform_unique_id" class="gform_hidden">
<input type="hidden" value="WyJhOjA6e30iLCJkZjhiZTNiZTg3NDNmMWNlNDNmNTk1N2M0NTY2ZTRiMSJd" name="state_1" class="gform_hidden">
<input type="hidden" value="0" id="gform_target_page_number_1" name="gform_target_page_number_1" class="gform_hidden">
<input type="hidden" value="1" id="gform_source_page_number_1" name="gform_source_page_number_1" class="gform_hidden">
<input type="hidden" value="" name="gform_field_values">
</div>
</form>
</div>
You should still keep your scripts in the footer for performance reasons. But you need to include this in the header.php right above your <?php wp_head(); ?>:
<?php gravity_form_enqueue_scripts(1,true) ?>
with 1 being the id of the form.
In addition to Nate Beers answer, If you have a reCAPTCHA on your form AJAX will not work. reCAPTCHA is not compatible with AJAX.
See issue on gravity forms forum.
https://www.gravityhelp.com/forums/topic/ajax-submission-not-working-on-hard-coded-form#post-36914
I went ahead and used the Gravity Forms anti-spam honeypot as a reCAPTCHA alternative on the form settings page.
Make sure jQuery is enqueued in the head - not the footer.
I'm using the Roots/Sage framework in which it is enqueued in the footer by default - which was causing your exact issue.

Kendo UI - Validator message overwrite and empty errors array

I'm running into a problem with a Kendo validator. Three fields are set up for validation. Tabbing through them, the first name and last name fields show the expected message, but after tabbing through the from date field, the first name and last name messages get replaced with the from date message. Then, upon calling the validate() method, the errors array is empty even though validation fails. Also, if the save button is clicked without tabbing through the fields, the errors for the fields are not displayed at all.
Another strange thing is that if the spans for the messages are removed, all messages appear next to the first name field - they aren't displayed next to the corresponding input.
Any insight as to get this working properly would be appreciated.
the Script and HTML:
$(document).ready(function() {
$("#fn").kendoMaskedTextBox();
$("#ln").kendoMaskedTextBox();
$("#from").kendoDatePicker({
format: "MM/dd/yyyy"
});
$("#thru").kendoDatePicker({
format: "MM/dd/yyyy"
});
$("#btnSave").kendoButton({
icon: "tick",
click: function() {
if (!vld.validate())
alert(vld.errors.length);
}
});
var vld = $("#myForm").kendoValidator().data('kendoValidator');
})
<div id="myForm">
<p>
<label for="fn" class="myLabel">First Name:</label>
<input id="fn" required validationMessage="{0} Required" />
<span class="k-invalid-msg" data-for="fn"></span>
</p>
<p>
<label for="ln" class="myLabel">Last Name:</label>
<input id="ln" required validationMessage="{0} Required" />
<span class="k-invalid-msg" data-for="ln"></span>
</p>
<p>
<label for="from" class="myLabel">Period:</label>
<input id="from" required validationMessage="From date is required" />
<span> - </span>
<input id="thru" />
<span class="k-invalid-msg" data-for="from"></span>
</p>
<p>
<label class="myLabel"></label>
<button id="btnSave" class="btn">Save</button>
</p>
</div>
jsFiddle link: http://jsfiddle.net/artrfkmw/1/
Okay, it seems a/the trick to make this work is to set the values of the data-for attributes of the message spans to the name attribute of the input tag, not the id tag. So in the above example, adding name tags to the input elements is the quick fix:
<div id="myForm">
<p>
<label for="fn" class="myLabel">First Name:</label>
<input id="fn" name="fn" required validationMessage="{0} Required" />
<span class="k-invalid-msg" data-for="fn"></span>
</p>
<p>
<label for="ln" class="myLabel">Last Name:</label>
<input id="ln" name="ln" required validationMessage="{0} Required" />
<span class="k-invalid-msg" data-for="ln"></span>
</p>
<p>
<label for="from" name="from" class="myLabel">Period:</label>
<input id="from" required validationMessage="From date is required" />
<span> - </span>
<input id="thru" />
<span class="k-invalid-msg" data-for="from"></span>
</p>
<p>
<label class="myLabel"></label>
<button id="btnSave" class="btn" >Save</button>
</p>
</div>

ruby forms in div elements

I'm having an issue where the form generated with ruby isn't included inside my #content div, is this because the form is generated after the html is read by the browser (sorry if I sound like a moron on this)
-- edit update - view source --
The code below generates with the email box and submit button outside of the content box
<div id="content">
<!-- text here -->
<form accept-charset="UTF-8" action="/password_resets" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="afmtpSAc93w1uMcnouhY9XmbVTM7fE1VNFvZKnp0kMs=" />
</div>
<div class="field">
<input id="email" name="email" placeholder="email#website.com" type="text" />
</div>
<div class="actions">
<input name="commit" type="submit" value="Reset Password" />
</form> </div>
</div>
I'm not sure I got the question right, but in the html above the last </form> </div> should be </div> </form>
figured it out after visiting this link
Is it correct to use DIV inside FORM?
once I removed the div's for field and action it cleared everything up

Resources