I have a simple form with a single 'email' field and two submit buttons.
The first button 'Next' triggers the forms default action: '/login'.
The second button 'Reset Password' has a 'formaction' element that redirect the form to a new destination: '/reset_password'.
<button type="submit" name="login_button">Next</button>
<button class="secondary_button" type="submit" name="reset_button" formaction="/reset_password">Reset Password</button>
The form works perfectly well, however when testing with Capybara:
click_button "Reset Password"
it triggers the form's default action and not the correct action. I've confirmed the default action is being triggered with:
save_and_show_page
It's definitely triggering the correct button but seems to be ignoring the 'formaction'.
Any ideas?
as you probably know, that's an HTML5 attribute, since Capybara uses RackTtest by default as its driver/browser (which is a very barebones, no JS support driver), it might just not be seeing it at all. I would assume you need a setup with a headless browser like PhantomJS (http://phantomjs.org/index.html). Which supports HTML5 attributes.
Related
IBM web experience factory uses dojo library, I am wondering if the I set <input type="text" name="usrname" required> in the consumer model, does the button still work if the input is not filled?
Well, HTMLFormElement has a method called checkValidity() which you can use.
So, in your case, you could use the :input selector with dojo/query to query all input elements inside a form (includes buttons, checkboxes, textfields, text areas and select boxes) and then use the onChange event to check if the form is valid and change the buttons disabled attribute.
For example:
query("[name=myForm] :input").on("change", function(evt) {
var isInvalid = !evt.target.form.checkValidity();
query("button[type=submit]").attr("disabled", isInvalid);
});
Now all you need to do is to make sure that your button is initially disabled/enabled depending on the initial state of the form.
A full example can be found on JSFiddle: http://jsfiddle.net/j8L6j77g/
i am trying to automate the login functionality of a site.I want to verify whether the tooltip is present or not and to capture the tooltip text displayed for the textboxes.The tooltip is displayed when trying to click on the login btn without filling the textboxes.The tooltip text is attached to the input elements via bootstrap javascript.No tilte attribute is present for the textboxes
https://elasticbox.com/login/ is the site address.Any ideas on how to capture the tooltip text .Thanks in advance
This is not a bootstrap tool-tip as you commented for #Varun's reply.
This is just the HTML5 form validation which comes into action when you put "required" as the attribute of textfield.
Make an html file 'test.html' file using the below code:
<html>
<body>
<form name='form1' post="http://www.google.com">
<input type='email' required placeholder='email address please' />
<input type='password' required placeholder='password please' />
<input type='submit' value='button1' />
</form>
</body>
</html>
Herein, when you click on "button1" (after opening the file in browsers like: Chrome, Firefox, etc.), you will see the necessary validation under the textfield(s).
But, there is no possible way to inspect them.
You can, however, use Sikuli/Autoit to check the presence of that validation text, but that again will be a lost cause as the image of the validation messages/tooltip differs from one browser to another.
Looks like developer needs to be consulted for this.
In javascript it seems like the signin button will remain disabled until both values are filled i.e. username and password.
I am not much into javascript, may be you can consult the developer in order to understand this more.
You can refer image below:
I am using Visual Studio 2010. Also I am using Razor and trying to develop an MVC application. I am using MVC4 and HTML5. I have following code
<input type="button" value="Click Me"
onclick = "window.location.href('#Url.Action("UserDetails", "User")')" />
Where UserDetails is my action and User is my controller. Whenever I click the button Click Me, User Details is returned. This happens properly in IE. But the same is not working for Mozilla and Chrome. an anyone suggest me on this. I went through google, and I have seen that many people faced the same issue. I tried couple of approaches given, but I could not be successful.Can you please tell where am I going wrong.
Regards
If your button's purpose is purely to redirect to another view, you should use a HTML Anchor (a) instead of an input element:
#Html.ActionLink("Click Me", "UserDetails", "User", null, new { #class = "button" })
This will render as:
Click Me
Then you can use the button class to style your link as you wish (ie. make it look like an input button, if that's your desire).
Is there a way using dojo/dijit to disable the submit button till all the fields in a form are valid. Kind of like having a dojo > method > onChange inside the form? So the submit button only becomes enabled when all the form elements have meet their criteria?
Are you using a dijit.form.Form widget as your form? If you are, I would suggest connecting to the Form's onValidStateChange event. The docs for this event specifically state your use case:
onValidStateChange
Defined by dijit.form._FormMixin
Stub function to connect to if you want to do something (like disable/enable a submit button) when the valid state changes on the form as a whole. Deprecated. Will be removed in 2.0. Use watch("state", ...) instead.
The best way to see what events are available for a given widget is to look at the API Documentation for the widget you are interested in under the "Event Summary" heading. The dojocampus reference documentation often leaves out examples for references to some of the more obscure features of the widgets.
I would suggest to have a hidden button which will submit the form. When you click visbile button run a javascript function that validates all the input and then clicks on the hidden button to submit the form. Please find the pseudo code below
<form action="register">
<input dojoType="dijit.validation.TextBox"/>
<button onClick="validateall()">submit</button>
<button id="submitForm" type="submit" hidden="true"/>
</form>
function validateAll(){
if(AllOk){
clearErrorMessage();
dojo.byId('submitForm').click();
}else{
showErrorMessage();
}
I have listeners on the event of radio being checked, which works perfect for the first time.
But if I refresh the page,the radio input is checked because of browser cache,and the event is not fired at all.
How to avoid this trouble?
I've run into this a lot, especially with Firefox. I'm not sure its necessarily valid but i read somewhere recently that adding autocomplete="off" to your form tag will prevent any form element value caching.
There is a post here that provides a JavaScript solution that looks like this:
setTimeout(
function(){
document.getElementById( "form" ).reset();
},
5
);
EDIT
As your radio's arent in a form this should work:
<input type="radio" name="foo" value="bar" autocomplete="off">Bar
<input type="radio" name="foo" value="baz" autocomplete="off">Baz
You could propably unselect everything using javascript when the beforeunload event fires.