I'm facing a very weird problem. My error message is not showing
below is my codepen
https://codepen.io/cancerian73/pen/eoaYga
<form data-abide novalidate>
<div class="search-container">
<input type="text" id="seach_again" placeholder="Try once again" aria-required="true" required>
<span class="form-error" data-form-error-for="search_again">Amount is required.</span> <span class="form-error"> Valid email required.</span>
<input type="submit" class="go-btn" value="GO">
</div>
</form>
Your id has a typo in it (seach_again instead of search_again). Though these error messages will work even with the typo because they are adjacent siblings to the input element. I wonder if you did not enable the abide javascript plugin. You need to enable that in addition to the scss.
Related
So I'm trying to add some additional CSS on Wordpress and override the color of this form button but nothings happening. Am I entering the right code in here?
When I inspect the button this comes up...
<form id="mc4wp-form-1" class="mc4wp-form mc4wp-form-1527" method="post" data-id="1527" data-name="Get Started"><div class="mc4wp-form-fields"><div class="input-group">
<div class="input-icon"><i class="far fa-paper-plane"></i></div>
<input type="email" placeholder="Your email address" class="form-control" name="email" data-error="e-mail field is required" required="">
<button type="submit" value="Subscribe" class="item-btn">Subscribe</button>
</div></div><label style="display: none !important;">Leave this field empty if you're human: <input type="text" name="_mc4wp_honeypot" value="" tabindex="-1" autocomplete="off"></label><input type="hidden" name="_mc4wp_timestamp" value="1635448917"><input type="hidden" name="_mc4wp_form_id" value="1527"><input type="hidden" name="_mc4wp_form_element_id" value="mc4wp-form-1"><div class="mc4wp-response"></div></form>
The reason why I've tried button.item-btn::before is because it shows this in the inspector
Try adding the CSS styling as inline with the button element.
Inline styling will override the styling from an external css file.
You can also try using the id selector id=mc4wp-form-1 in your form element to increase the css style specificity to help overwrite the default.
Your selector minus the pseudo-element should do the job.
Maybe there is another background-color definition for buttons in your stylesheets with higher specificity.
You could try raising the specificity of your selector like this:
#mc4wp-form-1 button.item-btn {
background-color: mycolor;
}
About a week ago i posted a question but couldn't get it answer because i didn't know how to use jsfiddle or codepen but i figured it out.
my problem is that the button doesn't work now if you click around it it will display the file search box this is the sample:
https://codepen.io/anon/pen/bWaYzJ
<label> Uploads
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
</label>
now if i detached the plugin from element then button works again.
change your outer label to div seems to solve your problem like this codepen
<div> Uploads
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
</div>
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
And make your javascript:
$(document).ready(function(){
$('#exampleFileUpload').onClick({
MultiFile();
});
});
First, remove the reference to the MultiFile source file - that's what causes the "MultiFile is not a function" error. You will need to include the MultiFile directly in the source for the codepen (as you already have).
Second, the label needs to wrap the input, and it cannot use the for attribute (since that relies on the name attribute for the target, which you have not set):
<div> Uploads
<label class="button">Upload File
<input type="file" id="exampleFileUpload" class="show-for-sr" multiple>
</label>
</div>
For this html code, I want to select an element using CSS.
I need to select "Cvv2 required" by referencing validatedMessage. I was thinking of trying .validateMessage + .Cvv2.required .However, that didn't work. It seems "Cvv2 required" is after "CCNumber required". But I need to reference "validatedMessage" which is inside "CCNumber required". I don't even know thats the proper jargon to explain this relationship....
<div class="CCNumber required">
<label id="label">Credit Card Number:</label>
<input name="test" type="text" class="wrong">
<span class="validatedMessage">Required</span> <br>
</div>
<div class="Cvv2 required">
<a> What's this</a><br>
</div>
This is not currently possible with pure CSS.
You are looking for some kind of "contains" query, which is not available.
https://css-tricks.com/child-and-sibling-selectors/#article-header-id-4
As part of a late night project I am working on out of interest, I am trying to scrape my Uber trip data off of their website.
I have had a look at the code of the login page on
https://login.uber.com/login
and have seen that they use POST method in their form setup as follows:
<form method="post" class="form" novalidate="">
<input type="hidden" name="_csrf_token" value="1452201446-01-hujzoBTxkYPrJessd6zQwnD2ZOFxMOVgIYN8iXntr6c=">
<input type="hidden" data-js="access-token" name="access_token">
<a href="#" class="btn btn--full btn--facebook" data-js="facebook-connect">
<span class="push--ends flush">Continue with Facebook</span>
</a>
<p class="primary-font primary-font--semibold text-uber-white background-line push--top push--bottom">
<span>or use email</span>
</p>
<div class="form-group push-tiny--top flush--bottom">
<input type="email" name="email" class="text-input square--bottom " placeholder="Email Address" value="" id="email">
</div>
<div class="form-group push--bottom">
<input type="password" name="password" class="text-input square--top " placeholder="Password" id="password">
</div>
What I have read up is that one needs to send csrf token along when trying to scrape
library(RCurl)
library(XML)
URL_str<-"https://login.uber.com/login"
URL_str2<-"https://riders.uber.com/trips"
email<-"exampleMail#gmail.com"
pass<-"thisisalong"
token<- "1452201446-01-hujzoBTxkYPrJessd6zQwnD2ZOFxMOVgIYN8iXntr6c="
params <- list('email' = email,
'password' = pass,
'_csrf_token'=token)
URL_doc = postForm(URL_str2, style="POST",
.params=params)
If I now try and scrape the site, I get
ERROR: FORBIDDEN
I have seen some examples in python with similar websites. Can the same be done in R?
The final answer ended up being quite simple:
library(rvest)
library(RCurl)
library(XML)
session <-html_session("https://login.uber.com/login")
email<-"exampleMail#gmail.com"
pass<-"thisisalong"
#Handling the html_form
form<-html_form(session)[[1]]
form<-set_values(form, email=email, password=pass)
#Found that unless I explicitly assigned the value to empty it created errors
form$url<-""
session_open<-submit_form(session,form)
session_open<-jump_to(session_open,URL_str2)
From here on in its straight forward pulling tables using html_table and isolating nodes using html_nodes. Hope this helps
Is there any way to have a slider and next to it an editable field with it's current value?
I am using MDL and not polymer, because its light weight and should be distributed with locally run software.
This is a way:
<input class="mdl-slider mdl-js-slider" type="range"
min="0" max="100" value="50" tabindex="0" id = "slide_01">
<form action="#">
<div class="mdl-textfield mdl-js-textfield" id="text_01">
<input class="mdl-textfield__input" type="text" >
</div>
</form>
and
$('#slide_01').on('input',function(){
$("#text_01").get(0).MaterialTextfield.change(this.value);
});
$('#inp_text_01').keyup(function() {
$("#slide_01").get(0).MaterialSlider.change($('#inp_text_01').val());
});
-- updated the code and the fiddle to make it update the slider when the value is entered in the field --
https://jsfiddle.net/n6xy84ov/
I think there should be a better way, referring to my question here:Fetching the value of a mdl-textfield