I have a (unchangable) form structure like this:
<div class="form-group">
<div class="col-sm-3 control-label">
<label for="frm-registrationForm-form-surname">Surname:</label>
</div>
<div class="col-sm-9">
<input class="form-control text" id="registration-form-surname" type="text" name="surname" required>
</div>
</div>
Is there possible to add the asterisk * sign next to all the labels relying to the inputs with "required" attribute using the CSS? I did not find any option to link the input with the label in CSS even in the same form group.
Thanks.
Using jQuery.
First solution. If .form-group has only one input and label elements.
$(document).ready(function () {
$('input[required]').parents('.form-group').find('label').append('*');
});
Second solution. Working only of your label for and input id attributes the same
$(document).ready(function () {
$("input[required]").each(function(index) {
var id = $(this).attr('id');
$('label[for="'+id+'"]').append('*');
});
});
I would recommend you to use the second solution.
You can use jQuery to implement this functionality. Inside document.ready function,
var str ='*';
$(".control-label").append(str);
Entire script would be
$(document).ready(function () {
var str ='*';
$(".control-label").append(str);
});
Related
I am using Materialize css to design my post. Suppose I have a form in modal and I and post it to server.
In that form I am checking if all fields are having value.
<form>
<div class="input-field">
<input type="text" id="title" class="validate" required="" aria-required="true">
<label for="title">Title</label>
</div>
The title field is required. But when I click on a submit button in modal it is closing even if title field has empty value. Is there any way to keep the modal open for validation error in Materialize css v1.
Think about this is in separate steps. The form submission only takes place at the end of the chain, when our criteria have been met.
User Submits form
We check the form
We feedback to user
Depending on the results of 2, we may either go back to step 1, or on to step 3.
Modal Structure:
<div id="modal1" class="modal">
<div class="modal-content">
<div class="input-field">
<input type="text" id="title" class="validate" required="" aria-required="true">
<label for="title">Title</label>
<span class="helper-text" data-error="Please enter your name" data-success="Thankyou!"></span>
</div>
</div>
<div class="modal-footer">
<a id="submit-button" href="#!" class="btn">Submit</a>
close
</div>
</div>
We add optional helper-text span for user feedback, as per the documentation.
The Javascript:
document.addEventListener('DOMContentLoaded', function() {
// init modal
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
// get button
var button = document.querySelector('#submit-button');
// Run our own function when clicked
button.addEventListener("click", checkForm);
// Function checks for input
function checkForm() {
var input = document.querySelector('#title');
if(input.value) {
// submit form
// add valid class to show helper
input.classList.add('valid');
// close modal
instances[0].close();
// clear form
input.value = '';
// remove valid class
input.classList.remove('valid');
} else {
// prompt user for input
input.classList.add('invalid');
}
}
});
We grab the value of the text input, and based on that, add a valid or invalid class - this is the built in materialize stuff that hides or shows the relevant message that we set in data-error and data-success.
The only thing you need to add to this is the actual form submission - so something like form.submit().
Codepen.
Suppose I have an input person name and another input business name:
<input name="nameofperson" id="nameofperson" class="form-control">
<input name="nameofbusiness" id="nameofbusiness" class="form-control" value="1234567">
If I started writing something on the nameofperson input. I want to clear the value of nameofbusiness, how to do that using CSS?
What you want to do is not possible through the Css,but you can do that using javascript or jquery.
With Javascript :
var nameofperson = document.getElementById('nameofperson');
var nameofbusiness = document.getElementById('nameofbusiness');
nameofperson.oninput = function() {
nameofbusiness.value = '';
}
<input type="text" name="nameofperson" id="nameofperson" class="form-control">
<input type="text" name="nameofbusiness" id="nameofbusiness" class="form-control" value="1234567">
With Jquery :
$(document).ready(function(){
$('#nameofperson').keyup(function(){
$('#nameofbusiness').val('');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="nameofperson" id="nameofperson" class="form-control">
<input type="text" name="nameofbusiness" id="nameofbusiness" class="form-control" value="1234567">
You can't clear an input field's value using CSS. However, you can use JavaScript/JQuery for that.
Please find the working example.
$("#person").on("keyup", function(){
$("#business").val("");
});
input {
width: 350px;
height: 30px;
text-indent: 5;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="person" placeholder="Enter name of person">
<input type="text" id="business" placeholder="Enter your Business">
You add same class name for both input. For exampale I add 'nameofSomething' class.
and the jquery
$(".nameofSomething").keypress(function () {
var id = $(this).attr('id')
var text = $("#" + id).val();
$(".nameofSomething").val('');
$("#" + id).val(text);
});
You can change keypress to change, blur...or whatever you want.
This is basically done by javascript and not by css.
CSS as the name says is for styling purpose.
you can do this by javascript easily using onfocus method:
<input type="text" onfocus="document.getElementById('nameofbusiness').value = ''">
I am building a React app with Semantic UI in Meteor. I have had two places where event handlers don't seem to be functioning in any capacity, and I haven't found anything online with a problem to the same extent.
Below is my React class. I have tried various ways of calling the eventHandler methods, but nothing works. That also seems irrelevant since I can't even get an anonymous function to run.
SaveSearchPopout = React.createClass({
getInitialState: function() {
return {username: "", queryname: ""};
},
handleUsernameChange:function(e) {
console.log(e.target.value);
this.setState({username: e.target.value})
},
handleQuerynameChange:function(e) {
this.setState({queryname: e.target.value})
},
handleSave:function(e) {
console.log("handling save");console.log(e);
e.preventDefault();
alert("saving!");
return false;
},
render: function() {
console.log(this);
return (
<div className="ui modal saveSearchPopout">
<div className="header">Save Search</div>
<div className="content">
<form className="ui form" onSubmit={function() {console.log("test");}}>
<div className="field">
<input type="text" name="username"
placeholder="Username"
value={this.state.username}
onChange={function() {console.log("update")}} />
</div>
<div className="field">
<input type="text" name="queryname"
placeholder="Name this search"
value={this.state.queryname}
onChange={this.handleQuerynameChange}></input>
</div>
<div className="actions">
<div className="ui cancel button">Cancel</div>
</div>
<button type="submit">Click</button>
<button className="ui button" type="button"
onClick={function() {console.log("saving");}}>Save</button>
</form>
</div>
</div>
);
}
});
The class is rendered from another classes method which looks like:
saveSearch: function() {
var backingDiv = document.createElement('div');
backingDiv.id = 'shadowPopupBack';
document.getElementsByClassName('content-container')[0].appendChild(backingDiv);
ReactDOM.render(<SaveSearchPopout />, backingDiv);
//this.props.saveSearch;
$('.ui.modal.saveSearchPopout')
.modal({
closeable:false,
onDeny: function() {
var container = document.getElementsByClassName('content-container')[0];
var modalContainer = document.getElementById('shadowPopupBack');
container.removeChild(modalContainer);
}
})
.modal('show');
},
The only button that works is the Semantic UI cancel button.
Has anyone else run into this or have any idea what I am missing. Thanks for the help.
Don't know if this is the case, but in newer versions of React (or JSX), when you pass a function to an HTML component or a custom component, that function is not automatically bound to this instance.
You must bind them manually. For example:
onChange={this.handleQuerynameChange.bind(this)}
Or you could use arrow functions, because they will automatically bind to this:
onChange={e => this.handleQuerynameChange(e)}
I eventually found the answer here. Semantic UI modal component onClose with React
and I haven't worked through it yet, but it looks like this is more Reactive solution than using jQuery to bind eventHandlers: http://www.agilityfeat.com/blog/2015/09/using-react-js-and-semantic-ui-to-create-stylish-apps.
Hope this is helpful to someone else.
I am using the Semantic UI search for the title property of my data object. data has other fields and I want to access them when an object is selected. For example, I want to put the value from the uuid property in a hidden input.
Is there a Semantic UI way of doing this? - I couldn't figure it out from the documentation (I know I can go and search through all data.title's for the selected one, but ... there probably is another way).
$('.ui.search').search({
source: data,
searchFields: [
'title'
]
,onSelect : function(event){
//...some other code
$("#tags").append('<input type="hidden" value="'+ value_from_my_uuid_field +'"');
}
});
<div class="ui search">
<div class="ui icon input">
<i class="search icon"></i>
<input class="prompt" type="text" placeholder="Search subjects...">
</div>
<div class="results"></div>
</div>
Thank you.
The search widget has an onSelect callback you can register (docs) When your user selects a suggestion from the search response, your callback will be called with the selection:
$searchWidget.search({
onSelect: function(result) {
// do something with result.id or whatever
}
});
I had a similar problem (but with ajax source data) and I finally ended up adding hidden content-tags to the results (on server side) like <div style='display:none;' class='id'>12345</div>.
And in the onSelect-callback I search the result (with jquery) for this content:
onSelect : function(event){
var $result = $(this);
var id = $result.find(".id").html();
...
// Return 'default' triggers the default select behaviour of the search module.
return "default";
}
HTH
Semantic UI actually provides a way of accessing any of the object's properties.
I used both dropdown and search classes, as shown in the docs with hidden input values for the properties.
<template name="search_drop">
<div class="ui floating dropdown labeled search icon button">
<i class="search icon"></i>
<span class="text">Search subjects...</span>
<div class="menu">
{{#each subjects}}
<div class="item" data-id="{{this.id}}" data-value="{{this.value}}" data-child="{{this.haschildren}}">{{this.name}}
</div>
{{/each}}
</div>
</div>
</template>
subjects contains my objects with id, name, value, haschildren properties.
Template.search_drop.rendered = function(){
$(".dropdown").dropdown({
onChange: function(value, text, $choice){
console.log(value); //will output the equivalent of {{this.name}}
console.log($choice[0].attributes); //list of attributes
console.log($choice[0].attributes["data-id"].value); //the equivalent of {{this.id}}
}
});
}
I want to use template.find (in Templates.xxx.events) to get the value of the checked radiobutton of a radiobutton group. In jquery I would use $('input:radio[name=XXXXX]:checked').val(). That does not work with template.find. template.find('input:radio[name=XXXXX]:checked')returns null.
What should I be using as CSS selector for this task?
Your selector looks right, so it could be just the way you are calling it. Maybe this example will help:
html
<template name="animals">
<form>
<input type="radio" name="animal" value="cat">Cat<br>
<input type="radio" name="animal" value="dog">Dog<br>
<input type="button" value="Click">
</form>
</template>
js
Template.animals.events({
'click :button': function(event, template) {
var element = template.find('input:radio[name=animal]:checked');
console.log($(element).val());
}
});
Here I'm still using jquery to extract the value, but it demonstrates the selector working.