I integrated nicEdit because it's very light unlike all the other ones that contain hundreds of kb's.
In Chrome it is however causing problems. It for example doesn't save the text into the textarea or make things bold. The problem can be observed at this website or see below code. Please don't provide a hack like one answerer did because that's not going to help anything.
I have disabled the editor for debugging purposes. You can enable it with your console through new nicEditor().panelInstance('comment');
<div class="rdd blog-item">
<h1><a id="blog-item-title" href="/b/asdfssadfadf">this ia test</a></h1>
<div class="blog-date">
Date posted: 2013-03-01
</div>
<div class="blog-message">
<p>
asdfasdfas
</p>
</div>
<div class="blog-keywords">
Keywords: dfsa sadfasd adfasf adfas
- jlk
</div>
<h4>0 Comments</h4>
<div class="blog-comment blog-new-comment">
<form id="new_comment" name="new_comment">
<div class="blog-comment-row">
<h4></h4>
<h4>Would you like to place a comment?</h4>
</div>
<div class="blog-comment-row">
<label for="comment">Comment</label>
<textarea name="comment" id="comment"></textarea>
</div>
<div class="blog-comment-row">
<label for="name">Name</label>
<input type="text" name="name" id="name" value="" title="Enter your name">
</div>
<div class="blog-comment-row">
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" title="Enter your email">
</div>
<div class="blog-comment-row">
<div class="blog-comment-cell">
</div>
<div class="blog-comment-cell">
<a class="blog-comment-submit blog-comment-button" href="">Submit</a><br/>
Your ip address is 220.245.93.218
</div>
</div>
</form>
</div>
</div>
The Bold problem is caused by CSS inheritance. In your css file remove rdd blog-item span{} and it will work. nicEdit does not save the contents automatically in the textarea. At form submission you therefore have to run: nicEditors.findEditor('comment').saveContent(); to save it
You can bind events on the editor and save it's contents when that event is fired.
When I run this code on your example page, it works for me (your server doesn't pickup the nicEditor HTML tags though):
var commentNicEditor = new nicEditor().panelInstance('comment');
commentNicEditor.addEvent("blur", function () {
commentNicEditor.instanceById('comment').saveContent();
});
Updated with jQuery-free solution based on official documentation.
Related
Below is my code:
<form>
<div class="form-group loginFormGrp">
<label class="caption">Backup Cloud</label>
<div class="custSelect loginSelect">
<label class="caption">Server URL</label>
<input type="text" aria-label="Server URL" name="serverUrl" class="form-control" placeholder="example.server.com" value="">
</div>
<div class="form-group loginFormGrp">
<label class="caption">Email</label>
<input type="text" aria-label="Email" name="email" class="form-control" placeholder="user#example.com" value="">
</div>
<div class="loginBtnRow">
<button tabindex="0" type="submit" class="lgBtn btn btn-primary btn-block">Continue</button>
</div>
</div>
</form>
whenever voiceover highlights the input text field it reads "You are currently on text field, inside web content. To enter text in this filed, type. To exit web area,.."
and when I Start typing it says nothing.
and checked other appilcation or websites it reads what i am typing.
but in my case its not reading.
Please help if anyone knows the solution.
Add title attribute to the input element and provide additional text.
Adding aria-label to the input elements should also be picked by the screen readers.
http://pauljadam.com/demos/title-aria-label.html provides details on how different browsers and screen readers treat these attributes.
Your code seems pretty fine. I tried with a chrome plugin called ChromeVox everything seems to be fine except that add the lang attribute to the parent html tag and enclose everything in a body tag some thing like this.
<html lang="en-US" style="height: 100%;">
<body>
<form>
<div class="form-group loginFormGrp">
<label class="caption">Backup Cloud</label>
<div class="custSelect loginSelect">
<label class="caption">Server URL</label>
<input type="text" aria-label="Server URL" name="serverUrl" class="form-control" placeholder="example.server.com" value="">
</div>
<div class="form-group loginFormGrp">
<label class="caption">Email</label>
<input type="text" aria-label="Email" name="email" class="form-control" placeholder="user#example.com" value="">
</div>
<div class="loginBtnRow">
<button tabindex="0" type="submit" class="lgBtn btn btn-primary btn-block">Continue</button>
</div>
</div>
</form>
</body>
</html>
I'm not sure if this'll help, but You may try to update fields value attribute, every time user modify text field. Something like that:
document.querySelectorAll('input[type="text"]').forEach(function(v){
v.addEventListener('input', function(){
v.setAttribute('value', v.value);
});
});
But I wish someone provide better answer, without using extra JavaScript.
I'm using mailchimp to create a signup sheet and every time the submit button is pressed, a new tab will open that confirms your subscription to the mailchimp email list. I want it to run as a sort of background process where no new tab is opened at all but the form is still submitted. Here is the code I currently have with MailChimp:
div id="mc_embed_signup">
<form action="//standrtech.us11.list-manage.com/subscribe/post?u=c330585c1144a0dd4bfd6d0df&id=b7e663bdf4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2></h2>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Enter your email">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!--real people should not fill this in and expect good things - do not remove this or risk form bot signup-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_c330585c1144a0dd4bfd6d0df_b7e663bdf4" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Get Early Access" name="subscribe" id="mc-embedded-subscribe" class="button" onclick="submission();"></div>
</div>
</form>
I know I am a little too late for this, but I have found the solution for future references.
For 'classic' form only
Looks like the HTML code is not copied properly. In the mailchimp embed form dashboard, look for the scripts after the outer div, the one containing the form, these scripts will validate your form. My embed form has two scripts after the outer div :
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
and
<script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
second script may vary depending upon your form fields, but I think you definitely need to add the mc-validate.js to resolve this issue.
Hope this helps.
Remove target="_blank" from your form tag.
in my case, it is because of the form validation script. i removed the script and do a simple email input text validation on my own.
So I'm using bootstrap form helpers to make selecting a country and region easier. Here is some of the code. I want to take this and input it into my db. It currently won't.
<div id="countries_states2" class="bfh-selectbox bfh-countries" data-country="US" data-flags="true" name="country">
<input type="text">
</div>
<div class="bfh-selectbox bfh-states" data-country="countries_states2" name="stateOrProvince">
<input type="text">
</div>
</div>
However, this does
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="email" placeholder="ironbat#example.com">
</div>
How can I enter the former into the form without wrecking the formatting (its very pretty :) )
As a template, here is a similar setup/strategy:
https://scotch.io/tutorials/easy-node-authentication-setup-and-local
I configure braintree.js like this:
braintree.setup(
brainTreeClientToken= 'token_from_server'
'dropin', {
container: 'brainTreeDropin',
form: 'checkout'
});
</script>
As i understand from the documentation of developers.braintree, you need to send a request param named 'payment_method_nonce' to your server, but it is not present in request. I don't see any js fault in browser console by the way.
Here is my form:
<form id="checkout" method="post"
th:action="....">
<div id="brainTreeDropin"></div>
<div >
<div class="form-group">
<label for="cardNumber">Credit Card Number</label>
<input data-braintree-name="number" ..other details.. "/>
</div>
<div class="form-group">
<label for="cardHolder">Name on Card</label>
<input data-braintree-name="cardholder_name" ..other details.. />
</div>
</div>
<div >
<div class="form-group">
<label for="cvc">Security Code(CVC)</label>
<input data-braintree-name="cvv" ..other details.. />
</div>
<div class="form-group">
<label for="expDate">Expiration Date</label>
<input data-braintree-name="expiration_date" ..other details.. />
</div>
</div>
</form>
Any idea of what's my fault?
I work at Braintree on the SDK Team.
The Drop-In integration requires a button or type=["submit"] element to be present within the form. I tried out your integration and was able to get a payment_method_nonce value sent to my server by adding in a <button>Pay</button> element. Try that out to see if that fixes your integration.
Also, just out of curiosity, is it your intent to have 2 credit card input methods inside of the same form? The Drop-In form contains the necessary fields for Credit Cards and you shouldn't need the data-braintree-name annotated inputs.
I have this link and if you click submit without filling any of the fields you get three validations but i have no js files included so where is this coming from
Here is the all the HTML
<div class="content">
<div class="page row nobor">
<div class="three_col wide row">
<div class="title">
</div>
<div class="column">
<h2>email sign up</h2>
<div class="inner">
<form method="post" action="/signup_complete" id="signup_form">
<p>
stuff
</p>
<p class="row">
<label>First Name <span class="req">*</span></label>
<input type="text" id="first_name" name="first_name" required="true">
</p>
<p class="row">
<label>Last Name <span class="req">*</span></label>
<input type="text" id="last_name" name="last_name" required="true">
</p>
<p class="row">
<label>Email <span class="req">*</span></label>
<input type="text" message="Please provide your email address." required="true" value="" name="email">
</p>
<p class="row nopad nomarg"><input type="submit" value="submit" class="sub_fbut submit" name="submit"></p>
<div class="clear"></div>
</form>
</div>
</div>
</div>
</div>
Basically I need to add more validation to not allow less then 3 letters but i have no idea where this is coming from and how do i alter...ideas?
This is coming from the HTML5 browser capabilities. Meaning this validation only works on modern browsers that support validation attributes such as "required", check out some examples here.
If you want browser compliant validation i suggest this plug in. Just remember people can disable JS so if you have sensitive data validate it server-side.
Remove the required="true" from your <input> tags to get rid of that validation.
if you click submit without filling any of the fields you get three
validations but i have no js files included so where is this coming
from
It looks like you are using HTML5 forms code here.
It uses required="true" or required
HTML5 browsers are interpreting this correctly.
Read more: http://diveintohtml5.ep.io/forms.html#required
Basically I need to add more validation to not allow less then 3
letters but i have no idea where this is coming from and how do i
alter
If you need some simple validation, you could do something like this
$('#first_name').blur(function(){
if($(this).val().length < '3'){
alert('You must enter three characters');
}
});
Example: http://jsfiddle.net/jasongennaro/ZEjEq/
This is just an example. You could do something like this on submit().
Also, you should validate content on the server side, too. Just to be sure!