I'm using jQuery validation and trying to get the error message for a pair of radio buttons to show up before the first button.
Here is the validation:
errorPlacement: function(error, element) {
if (element.attr("type") == "radio")
error.insertBefore(element.first());
else
error.insertAfter(element);
}
Here is the html:
<div class="full">
<label id="sample">Have you received your sample pack?</label>
<input type="radio" name="sample" id="sample_yes" value="yes" />
<label for="eliteflexsample_yes">Yes</label>
<input type="radio" name="sample" id="sample_no" value="no" />
<label for="eliteflexsample_no">No</label>
</div>
Right now the error is showing up after the first radio button.
This is working:
$(document).ready(function() {
$('form').validate({
// your validation options,
errorPlacement: function(error, element) {
if (element.attr("type") == "radio") {
error.insertBefore(element);
} else {
error.insertAfter(element);
}
}
});
});
Working Demo:
http://jsfiddle.net/DR5Aw/2/
Related
I got the following codes as shown below:
<div class="inner">
<h1> SOme text here</h1>
<app-secondpart>
<div class="class2">
<label> some label</label>
<label>
<input id="yes" type="radio">
"Yes"
</label>
<label>
<input id="no" type="radio">
"No"
</label>
</div>
</app-secondpart>
</div>
I wish to select/click "Yes" with this code "element(by.id("yes")).click();" But when running the app, I got this error "Failed: element not interactable."
I am new to Protractor by the way.
Try the following js click on button.
export async function jsClickButton() {
try {
let btn = element(By.id('yes'));
await browser.executeScript('arguments[0].click()', btn).then(async() => {
console.log('Btn has been clicked.');
});
} catch (error) {
console.log('Button is not clickable due ' + error);
}
}
Second solution is click on the label element.
I am writing a react component that holds a form, with radio buttons inside it. I've tried to create onChange() and handleSubmit() functions that would collect the value of the selected button and console log the value of it, but the event object isn't being recognised, and I get this error:
Uncaught TypeError: Cannot read property 'target' of undefined
Why is this happening and what can I do about it now?
Here is my code:
class NoteInput extends React.Component {
constructor(props) {
super(props);
this.state={
selectedValue: ''
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) {
this.setState({selectedValue: e.target.value})
}
handleSubmit(e) {
e.preventDefault();
console.log(this.state.selectedValue);
}
render() {
return (
<div>
<form onChange={this.handleChange()} >
<input type="radio" id="0" name="location" value={this.props.locations[0]} />
<label htmlFor="choice1">Safa Park</label>
<input type="radio" id="1" name="location" value={this.props.locations[1]} />
<label htmlFor="choice2">Mercato</label>
<input type="radio" id="2" name="location" value={this.props.locations[2]} />
<label htmlFor="choice3">Burj Khalifa</label>
</form>
<input onSubmit={this.handleSubmit()} type="submit" value="Submit" />
</div>
);
}
}
You are calling functions instead of passing them to event handler. So pass the function instead, by removing () like this
onChange={this.handleChange}
onSubmit={this.handleSubmit}
I have this template:
<Template name="nuevoEjercicio">
<div class="container-fluid">
<div class="form-group">
<input type="text" class="form-control input-lg" name="ejercicio" placeholder="Ejercicio?"/>
<input type="number" class="form-control" name="repeticiones" placeholder="Repeticiones?" />
<input type="number" class="form-control" name="peso" placeholder="Peso?" />
<button type="submit" class="btn btn-success" >
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</Template>
that I use to capture and save to the database.
Then on my .js file I am trying to get the data and save it:
Template.nuevoEjercicio.events({
'click .btn btn-success': function (event) {
var ejercicio = event.target.ejercicio.value;
var repeticiones = event.target.repeticiones.value;
var peso = event.target.peso.value;
ListaRutina.insert({
rutina:"1",
ejercicio:ejercicio,
repeticiones:repeticiones,
peso:peso,
});
// Clear form
event.target.ejercicio.value = "";
event.target.repeticiones.value = "";
event.target.peso.value = "";
// Prevent default form submit
return false;
}
});
}
as I understand, when I click on any object that has the btn btn-success style....but is not the case. For some obscure reason -for me- is not working.
Can you check it and give me some advice?
Thanks!
First of all, there's an error in you selector. It's 'click .btn.btn-success', not 'click .btn btn-success'.
Also you can't do that event.target.ejercicio.value thing. event.target is the element that was clicked. You'll have to do something like this:
'click .btn.btn-success': function (event, template) {
var ejercicio = template.$('[name=ejercicio]').val()
...
OK
What after wasting hours and hours the solution is:
1- on the html file give your input an id:
<input type="number" class="form-control" **id="peso"** placeholder="Peso?" />
<button type="submit" class="btn .btn-success" id="**guardar**" />
so now you want to save data on the input when the button is clicked:
2- You link the button with the funcion via the id
Template.TEMPLATENAMEONHTMLFILE.events({
'click **#guardar**': function (event, template) {
var ejercicio = template.$("**#peso**").val();
and get the value linking using the input id.
I have the following form in an Angular partial:
<form name="submit_entry_form" id="submit_entry_form" ng-submit="submit()" ng-controller="SubmitEntryFormCtrl" novalidate >
<input type="text" name="first_name" ng-model="first_name" placeholder="First Name" required/><br />
<input type="text" name="last_name" ng-model="last_name" placeholder="Last Name" required/><br />
<input type="text" name="email" ng-model="email" placeholder="Email Address" required/><br />
<input type="text" name="confirm_email" ng-model="confirm_email" placeholder="Confirm Email Address" required/><br />
<span ng-show="submit_entry_form.$invalid">Error!</span>
<input type="submit" id="submit" value="Submit" />
</form>
The trouble I'm having is with the span at the bottom that says "Error!". I want this to show ONLY if one of the inputs is both "ng-dirty" and "ng-invalid". As it is above, the error will show until the form is completely valid. The long solution would be to do something like:
<span ng-show="submit_entry_form.first_name.$dirty && submit_entry_form.first_name.$invalid || submit_entry_form.last_name.$dirty && submit_entry_form.last_name.$invalid || submit_entry_form.email.$dirty && submit_entry_form.email.$invalid || submit_entry_form.confirm_email.$dirty && submit_entry_form.confirm_email.$invalid">Error!</span>
Which is UGLY. Any better way to do this?
Method 1: Use a function on $scope set up by your controller.
So with a better understanding of your problem, you wanted to show a message if any field on your form was both $invalid and $dirty...
Add a controller method:
app.controller('MainCtrl', function($scope) {
$scope.anyDirtyAndInvalid = function (form){
for(var prop in form) {
if(form.hasOwnProperty(prop)) {
if(form[prop].$dirty && form[prop].$invalid) {
return true;
}
}
}
return false;
};
});
and in your HTML:
<span ng-show="anyDirtyAndInvalid(submit_entry_form);">Error!</span>
Here is a plunker to demo it
Now all of that said, if someone has entered data in your form, and it's not complete, the form itself is invalid. So I'm not sure this is the best usability. But it should work.
Method 2: Use a Filter! (recommended)
I now recommend a filter for this sort of thing...
The following filter does the same as the above, but it's better practice for Angular, IMO. Also a plunk.
app.filter('anyInvalidDirtyFields', function () {
return function(form) {
for(var prop in form) {
if(form.hasOwnProperty(prop)) {
if(form[prop].$invalid && form[prop].$dirty) {
return true;
}
}
}
return false;
};
});
<span ng-show="submit_entry_form | anyInvalidDirtyFields">Error!</span>
I have a simple HTML form that uses uses ajax in part of the validtion. the ajax works correctly and display errors correctly, but if all validation passes, the form doesn't submit. Basically, nothing happens. Nothing happens in Firebug, nothing happens on the page itself, etc. This is the Javascript that's called to validate the form:
var pass_form = $('#pass_form');
pass_form.submit( valid_pass_sett );
function valid_pass_sett() {
$('.caption_error').remove();
$('input').removeClass('error');
pass_old = $('input[name=pass_old]').val();
pass_new = $('input[name=pass_new]').val();
pass_confirm_new = $('input[name=pass_confirm_new]').val();
if (pass_old === "") {
//display error on form - snipped
return false;
} else if (pass_new === "") {
//display error on form - snipped
return false;
} else if (pass_new != pass_confirm_new) {
//display error on form - snipped
return false;
} else if (pass_new.length < 8) {
//display error on form - snipped
return false;
} else {
$.post("http://www.example.com/ajax/validate.php",{ // async validation
type: 'valid_old_change_pass',
pass_old: pass_old,
pass_new: pass_new
}, valid_pass_combo_callback);
}
return false; // cancel form submission
}
function valid_pass_combo_callback( data ) {
if (data == 'valid') {
//only if the form is valid!
pass_form[0].unbind('submit').submit();
//pass_form[0].submit();
} else if (data == "invalid_old") {
//display error on form - snipped
}
else if (data == "invalid_new") {
//display error on form - snipped
}
else {
//display error on form - snipped
}
}
and here's the basic HTML code for the form:
<form id="pass_form" class="standard" method="post" action="http://www.example.com/preferences" onsubmit="return valid_pass_sett()">
<fieldset>
<div>
<label for="pass_old">Old password:</label>
<input type="password" id="pass_old" name="pass_old" />
</div>
<div>
<label for="pass_new">New password:</label>
<input type="password" id="pass_new" name="pass_new" />
</div>
<div>
<label for="pass_confirm_new">Confirm new password:</label>
<input type="password" id="pass_confirm_new" name="pass_confirm_new" />
</div>
<div>
<label></label>
<input type="submit" id="pass_submit" name="pass_submit" value="Change password"/>
<input type="reset" id="pass_reset" name="pass_reset" value="Cancel"/>
</div>
</fieldset>
</form>
The script makes it all the way to the pass_form[0].unbind('submit').submit(); line, but then the form doesn't submit. Any help here?
Change the below line in your callback method valid_pass_combo_callback
//Replace this line
pass_form[0].unbind('submit').submit();
//By this
pass_form.unbind('submit').submit();
I decided to forgo binding this function to submit, and instead bound to an onclick event for a button on the form (which I'm using in place of a submit button) and that solved the problem. Validation is called when the button is clicked, and if client-side validation passes, then the form is submitted to the server for validation there.