I have a recaptcha widget in my form and i want it to be made mandatory.
since i dont have any direct control over the widget in my html, i was wondering if i can add the required attribute to it after it has been rendered.
ie. if i add the folloing css
#recaptcha_response_field{background-color:#000000;}
it does color up the recaptcha widget text field. in the same vein, if there was some way of setting the required="required" attribute for input fields via css, i'd be able to make it mandatory.
Does the following work for you:
$(function() {
$("#recaptcha_response_field").attr('required','required');
});
If I understand you correctly, this should do the trick:
$(function() {
$("#recaptcha_response_field").css({background-color:#000000;});
});
Without jQuery:
document.onload = function() {
document.getElementById("recaptcha_response_field").style['background-color'] = '#000000';
};
I'm not 100% sure on the second one, but I can't test it right now.
Related
I am trying to disable a button dynamically based on a data attribute that's present on the body, code looks sort of like this:
<body data-online="true">
<button disabled></button>
</body>
What I want is to set the pseudoclass disabled based on the value of the body's data attribute. I'm looking for the simplest possible way to do this. I know that conventionally this would be done asynchronously with JS, but for annoying reasons I have no direct control over I would prefer another way. I'm wondering if it's possible to set the pseudoclass directly through CSS or HTML in some way?
I honestly don't this it is possible to achieve this without any JavaScript since the disabled properly is a boolean attribute.
You'll need at least to grab the element using JavaScript and conditionally apply the disabled attribute. As on the code below:
function checkButtonDisabled() {
const body = document.querySelector('body');
const button = document.querySelector('#btn')
const buttonIsDisabled = body.getAttribute('data-online') === 'true'
if (buttonIsDisabled) {
button.setAttribute("disabled", true)
return
}
button.removeAttribute("disabled")
}
checkButtonDisabled()
Although, If your intention is also to style it, you could use the selector below or some variant that could suit better for you:
body[data-online="true"] > button {
/* Your styles here */
}
you could check this article also which explains attribute selectors.
I created a button
<button type="button" ng-click="chooseOptions()" id="chooseOptionButton" ng-bind="whatToDisplay()"></button>
Which shows a <div ng-show=appearOnChoice>on click and toggles back when clicking again!
$scope.chooseOptions=function(){
$scope.appearOnChoice=!$scope.appearOnChoice;
}
However, I also want this element to hide again, when the user clicks anywhere outside this div
element. How can I do this? I need strictly stick with AngularJS and not use jQuery.
Hope you can help me with that.
EDIT: I tried to adapt some of the events of bootstrap datepicker, but I am not sure how to apply it properly
$scope.$on('datepicker.focus', focusElement);
scope.$watch('isOpen', function(value) {
if (value) {
scope.$broadcast('datepicker.focus');
scope.position = appendToBody ? $position.offset(element) : $position.position(element);
scope.position.top = scope.position.top + element.prop('offsetHeight');
$document.bind('click', documentClickBind);
} else {
$document.unbind('click', documentClickBind);
}
});
var focusElement = function() {
$timeout(function() {
self.element[0].focus();
}, 0 , false);
};
How can I adapt this to my case?!
I think that you dont have to write a function, you can use ng-init to create a model, ng-show to show/hide the div based on the value of the model, and with ng-click change the value of the model. See example below:
var myapp = angular.module('myapp',[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-init="showDiv = true;" >
<div ng-show="showDiv"> SHOOOOOOOOW </div>
<button ng-click="showDiv = !showDiv;">Click me</button>
</div>
</div>
You can set the model value to be false when the user is clicking everywhere else, and set it again to true when it clicks the button. If you made a fiddle I can help you easier :)
If the DIV has focus, then you can use the ng-blur directive on the DIV to run set appearOnChoice to false. However, if the DIV does not already have focus (which it won't if you are depending on the button to make it visible), you will need to manipulate the DOM in your code (to provide focus) OR create a custom directive to set focus so that the ng-blur directive will work. Check out possibilities for that with this link.
alternatively, you can add an ng-click directive to every clickable object on your view that will hide the DIV when fired. But I don't really think that's the best way to go...
The easiest and cleanest way to handle the click away is to register and event on the document that will remove the element when anything other than it, or its children, are clicked.
For an example of a service that does this see GitHub EnzeyNet/Services
Sorry about the lack of documentation there but after injecting the service you would use it like this.
var divElem
nzService.registerClickAwayAction(function() {
divElem.remove();
}, divElem);
I simply solved it by using a ui bootstrap dropdown. This comes along with an is-open option and closes on click outside.
I am trying to create a text box that when typed in it automatically adds that text right under the box. I know it sounds a bit pointless but I really need this and can't figure out how to do this. I would appreciate all help. I have come across
**HTML**
<input name="name" id="name" />
**jQuery**
$("#name").change(function() {
$("#idOfPElementWhichYouWantToEdit").text($(this).val());
});
But it doesn't work for me I've tried it.
Thanks!
Your code runs as expected (see this jsFiddle).
Some tips for you. When working with DOM elements, make sure that you wrap your jQuery code around the DOMReady event. You can use the $(function() { }); shortcut as follows:
$(function() {
$("#name").change(function() {
$("#idOfPElementWhichYouWantToEdit").text($(this).val());
});
});
You should also be advised that change() is only triggered when the input element is blurred (i.e. loses focus). For a 'live' change, consider using keyup() as follows:
$(function() {
$("#name").keyup(function() {
$("#idOfPElementWhichYouWantToEdit").text($(this).val());
});
});
You can see the above in action at this jsFiddle
Rather than using the change event, try the keyUp event for the input.
http://api.jquery.com/keyup/
The change event is not fired until the input loses focus, so that is why it isn't updating as you go.
I trying to validate a form using ajax...I have got it to show either a cross or tick if the box passes valdation. This is done by showing or hiding a div tag, is there an easier way without me having to have a div tag for each cross & tick as this would use about 20 div tags.
Thanks
You could use the CSS :before property to do this:
.tick:before {
content:url(tick.gif);
}
.cross:before {
content:url(cross.gif);
}
(you'll probably have to tweak the CSS a bit to get the image to display in the proper position)
Then in your javascript, just add the class tick or cross to each text box that you want to display an image next to.
Since your validation depends on javascript you could leave the divs out of the html initially and insert them after validating a field. Let's say your source is something like:
<p><input id="email" name="email" type="text" value="" /></p>
Your script could be something like:
var emailField = document.getElementById('email');
if( isValid(emailField) ){
var tick = document.createElement('DIV');
tick.className = 'tick';
emailField.parentNode.appendChild(tick);
}else{
var cross= document.createElement('DIV');
cross.className = 'cross';
emailField.parentNode.appendChild(cross);
}
You add the classes '.tick' and '.cross' to your css and apply background images. Of course, you need some checking if the element was already inserted by a previous validation. This is just a simple example.
This way you don't need the extra divs initially.
Can I replace the maxlength attribute with something in CSS?
<input type='text' id="phone_extension" maxlength="4" />
No.
maxlength is for behavior.
CSS is for styling.
That is why.
No. This needs to be done in the HTML. You could set the value with Javascript if you need to though.
You can use jQuery like:
$("input").attr("maxlength", 4)
Here is a demo: http://jsfiddle.net/TmsXG/13/
I don't think you can, and CSS is supposed to describe how the page looks not what it does, so even if you could, it's not really how you should be using it.
Perhaps you should think about using JQuery to apply common functionality to your form components?
Not with CSS, no.
Not with CSS, but you can emulate and extend / customize the desired behavior with JavaScript.
As others have answered, there is no current way to add maxlength directly to a CSS class.
However, this creative solution can achieve what you are looking for.
I have the jQuery in a file named maxLengths.js which I reference in site (site.master for ASP)
run the snippet to see it in action, works well.
jquery, css, html:
$(function () {
$(".maxLenAddress1").keypress(function (event) {
if ($(this).val().length == 5) { /* obv 5 is too small for an address field, just want to use as an example though */
return false;
} else {
return true;
}
});
});
.maxLenAddress1{} /* this is here mostly for intellisense usage, but can be altered if you like */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" class="maxLenAddress1" />
The advantage of using this: if it is decided the max length for this type of field needs to be pushed out or in across your entire application you can change it in one spot. Comes in handy for field lengths for things like customer codes, full name fields, email fields, any field common across your application.
Use $("input").attr("maxlength", 4)
if you're using jQuery version < 1.6
and $("input").prop("maxLength", 4)
if you are using jQuery version 1.6+.