my code is :
$.validator.addMethod("dateBR", function dateBR(value, element) {
return /^(?:(?:(?:0?[1-9]|1\d|2[0-8])\/(?:0?[1-9]|1[0-2]))\/(?:(?:1[6-9]|[2-9]\d)\d{2}))$|^(?:(?:(?:31\/0?[13578]|1[02])|(?:(?:29|30)\/(?:0?[1,3-9]|1[0-2])))\/(?:(?:1[6-9]|[2-9]\d)\d{2}))$|^(?:29\/0?2\/(?:(?:(?:1[6-9]|[2-9]\d)(?:0[48]|[2468][048]|[13579][26]))))$/.test(value);
}
but I want to check it only if the Element is required ...
how can I do it ?
10X !!
Add a class of 'required' to your element:
<input class='required' />
Then loop through the class names with:
$(this).attr('class').split(' ');
Related
How can I create a custom input where several inputs affect only one source?
I have a custom time input as "hours:minutes:seconds" that should save the time as seconds.
What I have so far:
// calling the custom input with the expected source
<TimeInput source="time_A" />
// in the TimeInput component
<span>
<Field component={NumberInput} name="hh" value={this.state.hh} onChange={this.handleChange} />
<Field component={NumberInput} name="mm" value={this.state.mm} onChange={this.handleChange} />
<Field component={NumberInput} name="ss" value={this.state.ss} onChange={this.handleChange} />
</span>
The handleChange method parses the entered value according to the name of the Field and should update the original source (in this case: "time_A"). That update is what I really can't figure out how to do.
I think the solution would be using the this.props.input.onChange but I must be doing something wrong because my this.props.input is undefined.
Any thoughts?
I am using the below component to capture date and time inputs from the user. You can probably use the same strategy to concatenate all your inputs.
class DateTimePicker extends Component {
constructor(props) {
super(props);
this.state = {
date: null,
time: null
};
}
handleDateInput = (event, date) => {
this.setState({
date: date
})
}
handleTimeInput = (event, time) => {
this.setState({
time: time
})
}
componentDidUpdate(prevProps, prevState) {
const {setSchedule, channel} = this.props
//check for state update before actually calling function otherwise permanent re-renders will happen and page will lock`
//https://stackoverflow.com/questions/44713614/react-code-locking-in-endless-loop-no-while-loops-involved/44713764?noredirect=1#comment76410708_44713764
if (prevState.date !== this.state.date || prevState.time !== this.state.time) {
if (this.state.date && this.state.time) {
setSchedule(convertISTtoUTC(concatenateDateAndTime(this.state.date, this.state.time)), channel)
}
}
}
render() {
//id must be provided to date and time mui components - https://github.com/callemall/material-ui/issues/4659
return (
<div >
</div>
<DatePicker minDate={new Date()} id="datepick" autoOk={true} onChange={this.handleDateInput} />
<TimePicker id="timepick" autoOk={true} pedantic={true} onChange={this.handleTimeInput} />
</div>
</div>
)
}
}
Below is the function to concatenate the date and time and create 1 object from it. You will probably be passing it a DD, MM, YY object and creating the date from it.
export default (date, time) => {
return new Date(
date.getFullYear(),
date.getMonth(),
date.getDate(),
time.getHours(),
time.getMinutes()
)
}
First off, thank you for your valuable time and interest - any input to a beginner is greatly appreciated!
How do I insert multiple inputs with (in most cases) multiple same names? Here is my code:
View:
//Simplified version, original is a jquery append script
Passes: <input type="text" name="passes[]">
Points: <input type="text" name="points[]">
Passes: <input type="text" name="passes[]">
Points: <input type="text" name="points[]">
Controller:
//Loops through a table like form for inputting stats
function add_stat() {
$i = 0;
foreach ($this->input->post('points') as $points) {
$dataSet1[$i++] = array (
'points' => $points
);
}
foreach ($this->input->post('passes') as $passes) {
$dataSet2[$i++] = array (
'passes' => $passses
);
}
//Not sure how to pass multiple arrays, or if even possible
$this->sport_model->insert_stat($dataSet1, $dataSet2);
}
Model:
//Passing multiple params error out due to "String to Array Conversion"
function insert_stat($dataSet1, $dataSet2) {
$this->db->insert_batch('table', $dataSet1, $dataSet2);
return $this->db->insert_id();
}
set your controller and model as:
controller:
//Loops through a table like form for inputting stats
function add_stat() {
$points = $this->input->post('points');
$passes = $this->input->post('passes');
for($i=0;$i<sizeof($points);$i++)
{
$dataSet[$i] = array ('points' => $points[$i], 'passes' => $passses[$i]);
}
// $dataSet is an array of array
$this->sport_model->insert_stat($dataSet);
}
model:
function insert_stat($dataSet)
{
$this->db->insert_batch('table', $dataSet);
return $this->db->insert_id(); // this will return the id of last item inserted.
}
First, insert_batch() only takes two params: the table name and a data set.
Second, insert_id() isn't going to do you much good on a batch insert, but that's not a huge deal.
I assume you want points and passes to be in the same record, and that you're appending another set of points/passes inputs via JS.
View:
Passes: <input type="text" name="scores[0][passes]">
Points: <input type="text" name="scores[0][points]">
Passes: <input type="text" name="scores[1][passes]">
Points: <input type="text" name="scores[1][points]">
// etc...
In your controller, you would then just use one $dataSet array and loop through $this->input->post('scores')
When $dataSet is complete, you'd batch insert with $this->db->insert_batch('table', $dataSet)
Instead of adding a label with class="error", I would like to add .error to the label I already have:
I have this:
<label class="requiredlabel" for="email_address">Your Email</label>
<input name="email_address" id="email_address" value="" class="text email required" type="text">
I just want the <label> to gain the class .error on a bad validation.
currently, the plugin appends this:
<label class="error" for="email_address">This field is required.</label>
I'd rather it not add that label.
And of course, I want it to have eg, .error .invalid for emails.
Quote OP:
"Instead of adding a label with class="error", I would like to add .error to the label I already have ... I just want the <label> to gain the class .error on a bad validation."
Use the following callback functions to over-ride the defaults...
$('#myform').validate({
// your other options, rules, etc,
errorPlacement: function() {
return false; // suppress the default error messages
},
highlight: function (element) {
// on error add the error class to your label
$(element).prev('label').addClass('error');
},
unhighlight: function (element) {
// on validation remove the error class from your label
$(element).prev('label').removeClass('error');
}
});
"And of course, I want it to have eg, .error .invalid for emails."
Quote OP Comment:
"I meant that I would like my label to have class="error invalid" when the user inputs a bad email address (for email inputs only, obviously). And simply 'error', when required but missing. I'm currently only checking my elements for 'required' and 'email' (as applicable)."
This is impossible. The plugin simply evaluates the rules and spits out the appropriate error message along with an error class or a valid class when there is no error. There is no way to specify a different error class for each rule.
Here is what I came up with, using Sparky's answer:
jQuery.validator.setDefaults({
errorPlacement: function() { return false; },
highlight: function (element) {
jQuery(element).addClass('error');
jQuery(element).siblings( 'label' ).addClass('error'); // on error add the error class to your label
}
,unhighlight: function (element) {
jQuery(element).removeClass('error');
jQuery(element).siblings( 'label' ).removeClass('error invalid'); // on validation remove the error class from your label
}
});
I used siblings() because I had a <br> between my label and input (therefore prev() wasnt working). This works because my label and input are wrapped in a div (there would be no danger of inadvertently adding a class to another label)
And then:
jQuery.validator.addMethod("email", function(value, element) {
valid = this.optional(element) || /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+#[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value);
if(!valid)
jQuery(element).siblings( 'label' ).addClass('error invalid');
return valid;
},jQuery.validator.format("This part doesnt work, but i dont care") );
I just copied the original validation method, adding in my classes
I need to put the same NAME tag for Html.CheckBox somehow .
How I can do it? Here is my code... Thank you!
foreach (var answer in #question.Answers)
{
#Html.CheckBox("answer_CheckBox_" + answer.ID.ToString(), false, new { Value = answer.ID });
<label style="margin-left: 0.5em;">#answer.Title</label>
<br />
}
You're using an incrementing value as part of the name argument to the CheckBox() method (the first argument), so naturally they're going to be different names in the rendered HTML.
If you need them all to have the same name attribute value, use a static value:
#Html.CheckBox("answer_CheckBox", false, new { Value = answer.ID });
Does this work?
#Html.CheckBox("answer", false, new { name="answer", value = answer.ID });
I have the following HTML code:
<input id="session_remember_me" name="session[remember_me]" type="checkbox" value="1" />
<label for="session_remember_me">Remember me</label>
I want to check if the session_remember_me field has label Remember me
How do I check that?
I don't know Ruby, but in Java, you could just do the following :
boolean isLabelPresent = true;
try {
driver.findElement(By.xpath("//label[#for='session_remember_me']"));
} catch (NoSuchElementException e) {
isLabelPresent = false;
}
Here is how to do it in Ruby:
def isElementPreset?(type, selector)
begin
#driver.find_element(type, selector)
true
rescue Selenium::WebDriver::Error::NoSuchElementError
false
end
end
assert isElementPresent?(:css, "label[for='session_remember_me']")
I'd do this with XPath:
//form/div/div/div/span/input[#id='session_remember_me']/parent::span/parent::div/parent::div/label[#for='session_remember_me'][contains(text(),'Remember me')]
and just check if such an element exists.