Simply put, is it possible to have a single HTML input field with multiple email addresses (comma or semi-colon separated) validated using Parsley?
I could not find that it is possible through their documentation so I am trying to see if there is anything I might be missing.
If the case is that it is not possible then I am open to best alternative solutions to combine with my current Parsley validation of the rest of the fields.
Your input is appreciated.
you can use multiple email addresses you must add this attribute multiple = "multiple" inside input element example:
<input type="email" multiple />
but I don't used Parsley
this is link to website where you can find example pattern for multiple email addresses
example
the trick I came up with to validate comma separated input of emails with parsleyjs was to create a custom validator for a text field and rely on the browser's native support for validating multiple emails:
<input type="text" name="emails" required data-parsley-multipleemail>
(nb: we did not use <input type="email" multiple /> so this solution won't degrade to a proper email field.)
Parsley relies on the browser's native validators when available, so we'll do the same. (FYI using regexp for email validation is a pandoras box) Before loading Parsley.js, define a your custom validator like this:
window.ParsleyConfig = {
validators: {
multipleemail: {
fn: function (value) {
return $('<input type="email" multiple>').val(value)[0].checkValidity();
},
priority: 32
}
}
};
what this does is
create a virtual email input element
assign it the submitted value
[0] gets us the native javascript element (ie without jquery)
then we use the browsers native ValidityChecker which returns either true or false
return the result
lastly, insert this code after you load parsley to create a custom validation message (in english) for this validator:
window.ParsleyValidator && window.ParsleyValidator.addMessage('en', 'multipleemail', 'Invalid email(s)');
Related
I am working on form where i am taking inputs from users and all fields are mandatory and have validations like valid emailid, only 6 digit pincode.I have created a form on HTML and all validations are working fine on HTML by using "required" element of HTML which makes input type mandatory also input type email of HTML put all the validations required for an emailid.
But i want to achieve same thing in shiny internal UI form i tried a lot by accessing html tags inside shiny but everytime i am getting error for required element that i placed inside input tag of shiny.
Below attached image is from HTML form that i created using raw HTML but i want to achieve same thing in my shiny internal form.
Code for the above image:
<input type="email" name="emailid" value="" placeholder="Enter valid email id" required>
Can anyone help me how to achieve the same.Any help would be appreciated!
My solution to this would be in two parts. First, I'd put an observer on input$emailid to check that the user has entered a valid email address. If they haven't I'd then use the shinyFeedback package to display a pop-up prompting the user to put things right. You could also use shinyFeedback to display the prompt you show in your screen grab when the input is empty, but my own personal opinion is that that would be overkill.
Something like:
library(shinyFeedback)
observeEvent(input$emailid, {
feedbackDanger(
"emailid",
!isValidEmailAddress(input$emailid),
"Please enter a valid email address"
)
})
To get shinyFeedback to work you need to add useShinyFeedback() at the start of your ui page. Furter details here. Note that isValidEmailAddress() is a function you'll need to write yourself.
I'm trying to create input limitted to only 4 characters using reactjs semantic ui, I have tried a lot of ways of doing that but none of them seems to work.
<Input fluid
value={this.state.code}
type="text"
minlength="4" maxlength="8" size="10"
placeholder={t('Code')}
onChange={this.onCodeChange.bind(this)}
error={this.state.formErrorsKeys.code}
/>
Also I'm thinking if it's possible to make an input splitted into 4 input areas.
Cheers!
All you need is to add custom validation function which takes the input value and returns modified string.
Something like this:
const validateField = string => {
return string.slice(0, 4);
};
console.log(validateField('string')); // => 'stri'
console.log(validateField('test_test')); // => 'test'
Here is an example: https://codesandbox.io/s/r55228449p
UPD
Also I'm thinking if it's possible to make an input splitted into 4
input areas
Updated the example to add something similar to "an input splitted into 4 input areas"
React Semantic UI expects camel case maxLength and minLength props which will be passed to the html input. You are using all lowercase. Changing the prop names should fix your issue, however as others have said, a custom validator function may be appropriate.
I am finding it difficult to retrieve data from a web page when that data was initially passed in from the controller layer.
I am using Thymeleaf 3 and Spring boot v1. I have a webMVC controller which is passing an object to the template. The object looks something like this (pseudo-code):
public class Person{
// Nested object retrieved from various data sources
// and passed to the UI
private Address address;
private Job job;
// Form values I want to retrieve from UI
private String formValue1;
private String formValue2;
// getters/setters
}
My html page is divided into two sections. One section displays most of the Person values, while the other section includes a basic form. When the form is submitted, I want the form values plus ALL original values returned to the server.
What I'm finding is that it seems Thymeleaf will only retrieve values which are in the form, which means I have to stretch the form across both sections of the page, even though the user will only fill out one section of the page. So now the html looks as follows:
<html>
<!--header/body/etc -->
<form th:object="${person}" th:action="#{/person/id}" method="post">
<!-- Form Inputs -->
<input type="text" th:field="${person.formValue1}"/>
<input type="text" th:field="${person.formValue2}"/>
<!-- Values not used in form, but included so they will be sent back
to server -->
<input type="text" th:field="${person.address.city}" readonly="readonly"/>
<input type="text" th:field="${person.address.street}"
readonly="readonly"/>
<input type="text" th:field="${person.job.title}" readonly="readonly"/>
</form>
</html>
Additionally, it seems that Thymeleaf can only retrieve values that have the attribute th:field, but th:field is only assignable to the <input/> element (as far as I know), so any long text I have is truncated to the normal length of an input field, which is rather limited.
So I'm wondering if anyone can help with the following questions:
Can Thymeleaf return values which are not within a form (but returned when the form is submitted)
Is th:field the only option I can use for sending data back? (I've successfully displayed data with th:text, but no luck sending anything back).
Thanks.
Can Thymeleaf return values which are not within a form (but returned when the form is submitted)
This is more about how HTML forms and POST in HTTP works here. HTML form will send whole data within and Thymeleaf will bind that data to an object in your controller. So if you want all the values you should in fact wrap it all in a single form - this is a good way to go. If the case is that you don't want to display all the fields you could use hidden fields.
If you still would like to keep the data in separate forms for some reason you could try to work around it:
By using JavaScript to collect data from both forms and send it
Try to name both forms the same. I am not sure about it but it might work
I wouldn't recommend any of those anyway. Try to keep it simple.
Is th:field the only option I can use for sending data back? (I've successfully displayed data with th:text, but no luck sending anything back)
For a long text you can use textarea.
Is it possible to choose input type only for custom keyboard but prevent any browser validations so that entered value could be processed by the application?
I.e.
<input type="number">
With value 12345-123
On mobile device user would be presented with keyboard which allows to enter numbers as well as -. As soon as such value is entered browser returns empty string thus not allowing for me to choose and do validation on my side.
$0.value
with a return of:
""
I would like to use specific keyboards for some input types but I'm not sure if it's possible, if so - how?
Maybe try with $.val() not value. you can find the documentation here:
http://api.jquery.com/val/
http://codepen.io/TunderScripts/pen/jVvzNj?editors=1111
Html:
<input type="number" />
JS using JQuery:
var input = $('input[type=number]');
input.on('clic change', function(){
console.log($(this).val());
})
Hope it helps :)
I have the following code in my xpage connected to data source "d", the field Fld2 in the notes form is of type number.
<xp:inputText value="#{d.Fld2}" id="fld21" type="number">
<xp:this.converter>
<xp:convertNumber type="number"></xp:convertNumber>
</xp:this.converter>
</xp:inputText>
The reason for using both converter type number and input field type number is because I want to bring up a numeric keyboard on ipad. so this attribut will make the ui field of type number. in some browsers there are also some other nice HTML5 features added to the ui field, such as step arrows.
note: Specifying the number converter for the field does not make the html element of type number
My problem is that this code do not work for decimal numbers, if I enter 1,3 or 1.3 it do not recognize this as a number and strips of everything to the right of 1
if I remove the atrribute type="number" from the code everything works
I have tried to add the html5 "step=any" attribut but could not get it to work
http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/
if I add the attrribute step="0.1" I can step one decimal at a time using the ui field arrows, but when I save the document the decimals are removed
How can I add a numeric html field of type number that acceptes decimals to my xpage?
It turned out to be localized problem which was encountered when I was using Swedish language in my webbrowser. as soon as I switched to english it worked.
I had a long chat with Chintan about the problem and we discusses several solutions including adding a custom pattern, like so
<xp:inputText id="inputText2" value="#{document1.myField}" styleClass="floatNumberInput" type="number">
<xp:this.attrs>
<xp:attr name="type" value="number"></xp:attr>
<xp:attr name="step" value="any"></xp:attr>
</xp:this.attrs>
<xp:this.converter>
<xp:convertNumber pattern="#.##0,00"></xp:convertNumber>
</xp:this.converter>
</xp:inputText>
However, this did not help so I instead I came up with a workaround
First I removed the attributes, reverting back to a normal numeric xpages field
<xp:inputText id="inputText2" value="#{d.Fld2}" styleClass="num">
<xp:this.converter>
<xp:convertNumber type="number"></xp:convertNumber>
</xp:this.converter>
</xp:inputText>
Then I added a jQuery script that will take care of the numeric keyboard on ipad by changing the type to numeric when I enter the field and revert back to text when leaving the field.
and lastely I prevent users to enter any non numeric characters in to the numeric fields
$(function(){
$(".num").on('touchstart', function() {
$(this).prop('type', 'number');
});
$(".num").on('keydown blur', function() {
$(this).prop('type', 'text');
});
$(".num").keyup(function () {
this.value = this.value.replace(/[^0-9.,-]/g,'');
});
})
Note: the code above uses a jQuery prop method instead of the attr method for changing an attribute because the attr method do not allow changing the type due to some issues with IE
I guess this should help. The only different thing I have done here is tweaking the "xpage type field". I had the same problem before when I came across this excellent answer by #tim-tripcony. However, this should help you:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.data>
<xp:dominoDocument var="document1" formName="numberTest"></xp:dominoDocument>
</xp:this.data>
<xp:inputText id="inputText1" value="#{document1.myField}"
defaultValue="5.3" styleClass="floatNumberInput">
<xp:this.attrs>
<xp:attr name="type" value="number"></xp:attr>
<xp:attr name="step" value="0.01"></xp:attr>
</xp:this.attrs>
<xp:this.converter>
<xp:convertNumber pattern="#.##0,00">
</xp:convertNumber>
</xp:this.converter>
</xp:inputText>
<xp:button value="Submit" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete" immediate="false" save="true">
</xp:eventHandler>
</xp:button>
<!-- Script to overwrite the default input type text -->
<xp:scriptBlock>
<xp:this.value><![CDATA[XSP.addOnLoad(function(){
dojo.query(".floatNumberInput").forEach(function(eachInput){
dojo.attr(eachInput, "type", "number");
});
});]]></xp:this.value>
</xp:scriptBlock>
<!-- End of script block -->
</xp:view>