Contact form 7 set minimum field value - forms

I want set a minimum value in "Amount" field. An error message should be lower than the minimum value.
<p>Amount:<br />
[text* amount]</p>
<p>Name :<br />
[text* your-name] </p>
<p>Email :<br />
[email* your-email] </p>
<p>Message :<br />
[textarea your-message] </p>
<p>[submit "SEND"]</p>

Contact Form 7 has a number field. So, in your case, you could do something like:
[number* amount min:10 max:99 step:1 "40"]

Related

Depending fields validation

I have two password fields that, among other rules, have to be equal for the form to be valid.
<form onSubmit="resetPassword">
<ValidationGroup valid-bind="$page.formvalid" >
<FlexCol>
<TextField
value-bind="$page.password1"
label="Password 1"
inputType="password"
required
validationRegExp={/(?=.*\d)(?=.*[!##$%^&*]+)(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/}
minLength="6"
onValidate="validatePasswordsEqual"
/>
<TextField
value-bind="$page.password2"
label="Password 2"
inputType="password"
required
validationRegExp={/(?=.*\d)(?=.*[!##$%^&*]+)(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/}
minLength="6"
onValidate="validatePasswordsEqual"
/>
<Button
submit
disabled-expr="!{$page.formvalid}"
text="Reset Password"
/>
</FlexCol>
</ValidationGroup>
</form>
However, the validatePasswordsEqual runs only for the currently edited field, leaving the other field always unequal. I tried using store.notify() from inside the validatePasswordsEqual, but without success.
How can I cause validation on both fields at the same time?
You can use the validationParams field to trigger the validation if a value in another field changes.
<TextField
value-bind="$page.password1"
label="Password 1"
inputType="password"
validationParams={{ password2: { bind: '$page.password2 }}
required
validationRegExp={/(?=.*\d)(?=.*[!##$%^&*]+)(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/}
minLength="6"
onValidate="validatePasswordsEqual"
/>
The third argument provided to the onValidate callback will be the calculated value of validationParams.

AMP autocomplete how get id from autocomplete results and display only text in input

view screen I am using https://amp.dev/documentation/components/amp-autocomplete/ and I am able show in results id and name concated in one string, but I need show only name and store id in hidden input.
code screen
<amp-autocomplete filter="substring" filter-value="name" min-characters="2" src="/ajax/get_active_clinics.php" class="name_autocomplete">
<input type="text" placeholder="Numele clinicii" name="clinic_name" id="clinic_name"
{literal}on="change:AMP.setState({clinic_name_validation: true, form_message_validation:true})"{/literal}>
<span class="hide"
[class]="formResponse.clinic_name && !clinic_name_validation ? 'show input_validation_error' : 'hide'">Clinica este obligatorie</span>
<template type="amp-mustache" id="amp-template-custom">
{literal}
<div class="city-item" data-value="ID - {{id}}, {{name}}">
<div class="autocomplete-results-item-holder">
<div class="autocomplete-results-item-img">
<amp-img src="{{link}}" alt="{{name}}" width="40" height="40"></amp-img>
</div>
<div class="autocomplete-results-item-text">{{name}}</div>
</div>
</div>
{/literal}
</template>
</amp-autocomplete>
You can use the select event on amp-autocomplete to get the event.value which will return the value of the data-value attribute of the selected item.
https://amp.dev/documentation/components/amp-autocomplete/#events
You can then call the split() string method on the result.
You'll need to modify the data-value in your mustache template like so:
<div class="city-item" data-value="{{id}},{{name}}">
Then add the following code to your autocomplete, this will assign the split values to 2 temporary state properties.
<amp-autocomplete
...
on="select: AMP.setState({
clinicName: event.value.split(',')[0],
clinicId: event.value.split(',')[1]
})"
>
Once these values are in state you can then access them using bound values. Note the [value] attribute, this will update the inputs value when state changes. It's worth mentioning that the change in value won't trigger the change event listener on your input here as it's only triggered on user interaction.
<input
type="text"
placeholder="Numele clinicii"
name="clinic_name"
id="clinic_name"
[value]="clinicName"
on="change:AMP.setState({
clinic_name_validation: true,
form_message_validation:true
})"
/>
Last thing you'll need to do is add the hidden input for Clinic ID, again this will need to be bound to the temporary state property clinicId.
<input
type="hidden"
name="clinic_id"
[value]="clinicId"
>

Umbraco XSLT search page navigation using input onchange

I have created a pagination input that on change will go to the value entered into the input.
It will detect the page range and allow navigation between those pages in that range.
e.g /image-gallery-album-1.aspx?page=3
<form type="get" onchange="return false">
<div class="pagerUI">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- previous page -->
<xsl:if test="$page > 1">
<td class="pager-prev"><a class="previous" href="{concat('?page=', $page - 1, $qs)}" title="Previous page">‹</a></td>
</xsl:if>
<td>Page</td>
<td><input type="number" name="page" id="page" min="1" >
<xsl:choose>
<xsl:when test="$page=1">
<xsl:attribute name="value">1</xsl:attribute>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="value"> <xsl:value-of select="$currentPageNumber" /> </xsl:attribute>
</xsl:otherwise>
</xsl:choose>
<xsl:attribute name="max"> <xsl:value-of select="$numberOfPages"/> </xsl:attribute>
</input></td>
<td>of <xsl:value-of select="$numberOfPages"/></td>
<!-- next page -->
<xsl:if test="$page * $resultsPerPage < count($matchedNodes)">
<td class="pager-next"><a class="next" href="{concat('?page=', $page + 1, $qs)}" title="Next page">›</a></td>
</xsl:if>
</tr>
</table>
</div>
</form>
However, when I added this to the XSLTSearch code it doesn't work as the URL loses the search string.
So instead of navigating to: /image-search.aspx?search=football&page=3
It navigates to: /image-search.aspx?page=3 Which doesn't display any results on that page as it's missing the search criteria to display the search results.
I tried to change the form and include an "action" that would change the URL to include the search value but I can't include the input value as it's dynamic.
For example with the below form if I enter any value into the input the URL updates to following: /image-search.aspx?search=otbra&page= It's missing the entered number of the input value.
Search form with onchange and action and method post attributes:
<form type="get" onchange="return false">
<xsl:attribute name="method"> <xsl:text>post</xsl:text> </xsl:attribute>
<xsl:attribute name="action"> <xsl:text>?search=</xsl:text> <xsl:value-of select="$search"/><xsl:text>&</xsl:text>page= (input value)</xsl:attribute>
Is there some javascript or some way of detecting the value submitted and parsing it into the search string of the URL?
Any assistance would be appreciated. Cheers, JV
NOTE: As comment on your post says the likely issue is with the $qs variable, however here's an explanation of how you can get Query String values in Umbraco, for reference.
In Umbraco you can retrieve a Query string value in XSLT using umbraco.library
So to retrieve the value of search you would call something like:
<xsl:variable name="searchValue" select="umbraco.library:RequestQueryString('search')"/>
This creates a variable called searchValue which you can then use to re-inject the query string value in your url.
Something like this:
<a class="next" href="{concat('?page=', $page + 1, '&search=', $searchValue)}" title="Next page">›</a>
More information on umbraco.library can be found on the our.umbraco.org site.

Keep form parameters in url?

I have a jsp page that gets input from the user in a series of forms. First I ask for the user's height, then their weight. I'd like to ask for each on a separate "page". But really I'm just submitting the same jsp file again, only using the values in the url to figure out which form contents I should be showing:
String height = request.getParameter("height");
String weight = request.getParameter("weight");
<form>
<%
if (height != null) {
%>
Weight: <input type="text" name="weight" />
<%
} else {
%>
Height: <input type="text" name="height" />
<%
}
%>
<input type="submit" />
</form>
So the first run would ask for their height, the second would ask for their weight (if it sees the "height" param is already present in the url). Is that possible? It seems like I lose the params as I progress through each step,
Thanks
Just add a hidden input field with the height stored in it so you don't lose the height value when asking for weight in the second step:
<input type="text" name="weight" />
<input type="hidden" name="height" value="<%= height %>" />

Salesforce - Process variable number of form fields

I've been able to do this in PHP but it's not translating to Salesforce very well.
I have a form to input an Opportunity. It has an Account, a Contact, and a variable number of fields that will be used to create custom objects (For my purposes an Opportunity is a trip, and the custom objects are legs of that trip). The Salesforce controller needs to create a new Opportunity with the Account and Contact (that's the easy part) but then it needs to create a new custom object (Leg__c) for each leg of the trip.
My form looks like this:
<input type="text" name="Account" />
<input type="text" name="Contact" />
<div id="leg0">
<input type="text" name="dep[0]" />
<input type="text" name="arr[0]" />
</div>
<div id="leg1">
<input type="text" name="dep[1]" />
<input type="text" name="arr[1]" />
</div>
...
I'm not even sure where to begin on this one...
Assuming you know how many legs you need, you can simply create a list of them in your visualforce controller:
public list<Leg__c> liLegs {get; set;};
// upon oppty creation:
liLegs = new list<Leg__c>();
for (integer i = 0; i < iNumLegs; i++)
{
liLegs.add(new Leg__c());
}
Then you can just loop over these in your page like so:
<apex:repeat var="v" value="{!liLegs}">
<apex:inputField value="{!v.Dep__c}"/>
<apex:inputField value="{!v.Arr__c}"/>
</apex:repeat>
The input fields will correspond to the fields in each entry in the list, so then in your Save action or whatever you're using you can just insert the list insert liLegs;.
Hope this is of help and I haven't missed the mark, let me know if so! PS. I've just written this code directly in here so it may not be 100% syntactically correct ;)