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.
Related
I am trying to get a search box to post its content into a searchbox on another domain, using the html post method, however its not working after being redirected to the second site the search box remains empty on site 2.
Both servers belong to the same business and I have access to both, can someone tell me what I could do without using java to get the contents from the input box 1 on site 1 posted to the input box 2 on site 2
here is the line of code I am using on the first site.
form action="https://site2.com/cart.php?a=add&domain" method="post"
Thanks
You''ll need to catch and process both the GET arguments (in your action URL) and the POST stream (from the form elements) in the site2.com/cart.php file that you are using as the action.
Assuming the input box on site1 is named inputBox and is contained in the form with that action, when the form is submitted the site2.com/cart.php script can access the value at $_POST['inputBox'] - ie, wherever that goes on site2, you could do
<form name="someformonsite2" action="....">
<input type=text
<?php
if((!empty($_POST['inputBox'])&&(passes_your_validation($_POST['inputBox']))){
print("value=\"".$_POST['inputBox']."" );
}
?>
size=12 maxlength=11>
<!-- rest of form follows -->
Which would effectively send to the browser:
<input type=text value="SomeVal" size=12 maxlength=11>
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.
I need to validate a Promo Code for one of my html Booking form field. If the entered promo code is correct, users can submit the Booking details. Only one unique promo code. Something like "15OFFNOW" How should I do it? Please help.
Thanks.
First, don't put the promo code in your page. Anyone can see it.
I would do this, but it depends on actually functionality.
Do client side check (this can be bypassed by a malicious user)
Do server side check
Do client side check
Use a good non-reversible hashing algorithm and verify what you have in the prom text box to the hash you have stored in a JavaScript variable or in a data-hash attribute.
So if hash(text box value) == valueOf(data-hash), then proceed to sever validation.
Do server side check
In server no need of hash. Just check the post string with the promo code you have.
i try your code
<form method="post">
<input class="form-control form-control-light bdr-2 rd-0" required
data-label="Promo Code"
data-msg="Please enter a valid promo code."
type="text" name="promo-code"
placeholder="Promo Code"
pattern="15OFFNOW" required>
<input type="submit" value="submit"/>
</form>
validation is work . show this message .
You can use Javascript for that , I fyou want to match promocode or you can validate it at backend using any backend language like PHP or java
for JQuery
//previous Ajax code here
if($("#input_id").val() !== "15OFFNOW"){
return false ;
}
// here you can proceed for Ajax request
You are looking for an input pattern, also called regexp (though I would instead suggest doing it js way (but not global) or on server side as advanced users can simply inspect html code). Most probably something like this
<input type="text" name="promo" pattern="15OFFNOW" required >
Also, please try googling it, there're similar questions like this answered also on StackOwerflow, e.g.
html: Can we match an exact string using html pattern attribute only?
js & php: check if input value not equal to integer then don't submit form
Hi I have isolated an tag containing a radio button and would like to select one of the options. Here is the full input path:
<input type="radio" id="gen" name="gen" value="Male" onclick="ajaxSetAge(this.value);" />
and I am using the following:
postForm("http://www.archersmate.co.uk/",
radio = 'Female')
however this returns:
Error in nchar(str) : invalid multibyte string 1
What am I doing wrong here?
You need to refer to the name of the form field, not the type, like:
postForm('http://www.archersmate.co.uk', gen='Female')
That said, you won't be able to fill out the form on that website because it does not work as an HTTP POST request. Instead, it triggers an AJAX event. So, you're either going to have to go through the javascript and figure out if there's an underlying document you can access directly OR you'll have to use something like PhantomJS to trigger the relevant form fields and record the resulting javascript-generated contents.
I have a very long form, so I need to separate it to different pages.
My questions are:
1) How to save the form input when the user navigate to next form, and when the user back to previous form, the data entered previously will still be there.
2) How can I save the data of the incomplete form and provide the user a link so that he can go to that link and continue to fill in the form before actually submit it.
Please advise me on how to achieve these. Thanks in advance.
Simply submit the form to next form page and in next form page you can populate hidden fields with the received data from form1
form2.php
$form1Field = $_POST;
form2.php
<form action="form3.php">
<input id='form1_name' type='hidden' value='<?=form1Field['name']?>' />
<input id='form12_email' type='text' value='' />
</form>
#katti's suggestion is good, easy way is to make divs for each form and hide using css "display:none" all divs except 1st, then on a click button, hide div1 and show div2 so on. that way you wont need many form and will need less code and faster solution.
You can use hidden fields for this purpose. Or save data in cookies.
You can divide the form by dynamically loading the next part of the form using JavaScript.
And it is a better user experience too not loading a new page completely.
In this case you can save the form content in a JSON object which can be posted to the server once the user hits submit.