I have a website which I need to login to automatically.
I am trying to use Watin .NET library in order to do that.
When I fill out the user name and password fields using Watin, the sumbit button remains disabled.
I tried applying many events on the other fields (KeyPress, KeyDown, KeyUp, Tab, Enter...) Nothing worked.
Pardon me for finding the button by value, but this is the only way that I found that worked.
var field = ie.TextField(Find.ByName("userName"));
field.TypeText("username");
field.KeyDown();
field.KeyUp();
field = ie.TextField(Find.ByName("password"));
field.TypeText("pwd");
field.KeyDown();
field.KeyUp();
ie.Button(Find.ByValue("התחבר")).Click();
I am getting an exception that the button is disabled.
The page which I need to login to is:
https://portal.dorad.co.il/#/Login
All that I want is to find an automatic way to make the sumbit button enabled so that I can login.
Login Form Code:
<form class="span5 offset4 loginForm ng-pristine ng-invalid ng-invalid-required" name="loginForm" ng-submit="doLogin()" autocomplete="off">
<h2>
Login
</h2>
<fieldset>
<div class="control-group">
<label class="control-label" for="fullName">
User Name
</label>
<div class="controls">
<input name="userName" id="useName" ng-required="true" type="text" ng-model="user.userName" auto-fill-sync="" autocomplete="off" class="ng-pristine ng-invalid ng-invalid-required" required="required">
<span class="alert alert-error" ng-show="loginForm.userName.$error.required && loginForm.userName.$dirty" style="display: none;">
Mandatory Field
</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="emailAddress">
Password
</label>
<div class="controls">
<input name="password" id="password" type="password" ng-model="user.password" auto-fill-sync="" ng-required="true" autocomplete="off" class="ng-pristine ng-invalid ng-invalid-required" required="required">
<span class="alert alert-error" ng-show="loginForm.password.$error.required && loginForm.password.$dirty" style="display: none;">
Mandatory Field
</span>
</div>
</div>
</fieldset>
<input type="submit" class="btn" value="התחבר" ng-disabled="loginForm.$invalid" disabled="disabled">
</form>
This might be due to firing of an event getting blocked.
Try using:
Element fg = ie.TextField(Find.ByName("password"));
fg.DomContainer.RunScript("$('#"+fg.id+'").change();");
This solved a similar problem for me.
Ok. Then try to use Eval function which takes java script code. Pass the two elements to the below method and check.
private void ChangeAndBlur(Element element)
{
try
{
element.DomContainer.Eval(string.Format("$('#{0}').change()", element.Id));
element.DomContainer.Eval(string.Format("$('#{0}').blur()", element.Id));
}
catch
{ }
}
Related
How do I write a function that overrides form validation when a user clicks the back button?
If the user doesn't fill the form and clicks submit, it tells shows " please fill in this field"
then I added a back button in case the user doesn't wanna fill the form and wants to go back
but onClick it shows "please fill in this field"
how do I override this when the user clicks back?
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
function goBack() {
window.history.back()
}
<div class="form-div">
<form name="myForm" action="action_page.php" onsubmit="return validateForm()" method="post" required>
<button onclick="goBack()">Go Back</button>
<div class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="name"><b>FullName</b></label>
<i class="fa fa-user icon"></i>
<input type="text" placeholder="Enter Name" name="fullName" id="name" required>
<label for="email"><b>Email</b></label>
<i class="fa fa-envelope icon"></i>
<input type="text" placeholder="Enter Email" name="email" id="email" required>
<label for="psw"><b>Password</b></label>
<i class="fa fa-key icon"></i>
<input type="password" placeholder="Password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<i class="fa fa-key icon"></i>
<input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" required>
<p>By creating an account you agree to our Terms & Privacy.</p>
<button type="submit" class="registerbtn">Register</button>
</div>
<div class="container signin">
<p>Already have an account? Sign in.</p>
</div>
</form>
</div>
I think removing the "required" attribute from your form tag should be good even if you keep this "required" attribute on your inputs.
This thing happen because you added button inside <form> that causing it to act as a submit button
see this: How to prevent buttons from submitting forms
so basically you can return false, but its much easer to just remove the button outside the <form>
FYI
You should ALWAYS check the values of the inputs buy yourself because everyone who is familiar with the devTools can delete the required attribute and then send empty values to your server
Another FYI
You must check the values also in the server because there are many ways you can override the client checks (you do the client side check just for UX)
I'm working on a iOS app that uses a WKWebView to log into a website. The website presents a login form written in AngularJS that takes a UserId and Password. I'm attempting to pre-fill the UserId using javascript to fill in the appropriate value:
document.getElementsByName('UserId')[0].value = 'MyUserId'
Once submitted, the form returns 'invalid credentials' as if the userid input field has been left blank. If I subsequently make any manual changes to the UserId input field and resubmit it works.
I have verified that the UserId does contain the correct value. I have also tried to change the AngularJS field attributes prior to submitting the form:
ng-dirty ng-valid-parse ng-touched ng-not-empty ng-valid ng-valid-required
Within my javascript code, I make sure to convert the UserId to a javascript compatible string:
UserId.toString()
Manually typing the UserId and autofill from 1Password works as expected.
I would appreciate any suggestions or advice.
The angular code for the form:
<form class="spark-splash-screen__form spark-text-left ng-dirty ng-valid-parse ng-valid ng-valid-required" novalidate="" name="loginCtrl.loginForm" ng-submit="loginCtrl.submitForm()">
<p class="spark-margin-top--lg spark-margin-bottom" translate="">Sign In to.</p>
<label class="spark-input" fang-input="" ng-class="{
'active': loginCtrl.formData.id
}">
<input class="spark-input__field ng-touched ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required" name="UserId" placeholder="Enter User ID..." role="textbox" required="" ng-model="loginCtrl.formData.id" autofocus="">
<span class="spark-label">User ID</span>
</label>
<label class="spark-input" fang-input="" ng-class="{
'active': loginCtrl.formData.password
}">
<input type="password" class="spark-input__field ng-touched ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required" name="Password" placeholder="What is your password?" role="textbox" required="" ng-model="loginCtrl.formData.password">
<span class="spark-label">Password</span>
<span class="spark-input__addon spark-input__password-toggle">
<i class="spark-input__password-show spark-icon--md spark-icon-password-view"></i>
<i class="spark-input__password-hide spark-icon--md spark-icon-password-hide"></i>
</span>
</label>
<fieldset class="row">
<label class="col-xs-12 spark-checkbox">
<input class="spark-checkbox__input ng-pristine ng-untouched ng-valid ng-empty" type="checkbox" name="RememberMe" ng-model="loginCtrl.formData.rememberMe">
<span class="spark-checkbox__box"></span>
<span class="spark-label" translate="">Remember Me</span>
</label>
</fieldset>
<div class="row">
<div class="col-xs-12 spark-margin-top">
<button type="submit" class="spark-btn spark-btn--md spark-btn--primary spark-block--lte-sm spark-margin-bottom--md spark-pull-right--gte-sm" ng-disabled="loginCtrl.formSubmiting" translate="">Sign In</button>
<div class="spark-splash-screen__help-container spark-pull-left--gte-sm">
<button type="button" class="spark-btn spark-btn--text spark-splash-screen__help spark-margin-bottom--sm" translate="" ng-click="loginCtrl.openDialog('findUserOrPass')">Forgot User ID or Password?</button>
<button type="button" class="spark-btn spark-btn--text spark-splash-screen__help spark-margin-bottom--sm" translate="" ng-click="loginCtrl.openDialog('firstTimeUser')">First-Time User</button>
</div>
</div>
</div>
</form>
This is the answer I figured out after being pointed in the right direction:
document.getElementsByName('UserId')[0].value = useridField;
angular.element(document.getElementsByName('UserId')).scope().loginCtrl.formData.id = useridField;
Try also assigning the ng-model (loginCtrl.formData.id)
From loginCtrl, which I assume is the controller:
document.getElementsByName('UserId')[0].value = 'MyUserId';
formData.id = 'MyUserId';
If you're doing this asynchronously, you may need to $apply:
document.getElementsByName('UserId')[0].value = 'MyUserId';
$scope.$apply(function() {
formData.id = 'MyUserId';
});
This is the answer I figured out after being pointed in the right direction:
document.getElementsByName('UserId')[0].value = useridField;
angular.element(document.getElementsByName('UserId')).scope().loginCtrl.formData.id = useridField;
I am new to HTML, PHP and JavaScript, so expect mistakes.
I've got the form working and sending contents via email in my PHP file. That works. I'm using the Iframe to keep people on page and that seems to work as intended.
I'm trying to get a bootstrap alert to appear once the form is submitted. So it's collapsed by default and I simply want it to appear once the form is submitted or the button pressed. I cannot figure it out for the life of me. The form will submit as expected but the script does not seems to run with the alert.
The script is within the HTML doc:
<script>
function FormSubmit(){
alert("The form was submitted");
$('#AlertSuccess'.show('fade');
}
</script>
<div id="AlertSuccess" class="alert alert-success collapse">
<!--<a id="CloseAlert" href="#" class="close">×</a> -->
<strong>Awesome</strong> We will contact you shortly
</div>
<div class="contact_form_container">
<iframe name="keepitneat" style="display:none;">
</iframe>
<form id="contact_form" class="contact_form" action="/contact_send_btn.php" method="post" target="keepitneat" onsubmit="FormSubmit()">
<input id="contact_form_name" name="name" class="input_field contact_form_name" type="text" placeholder="Name" required="required" data-error="Name is required.">
<input id="contact_form_email" name="email"class="input_field contact_form_email" type="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
<input id="contact_form_number1" name="number1"class="input_field contact_form_number1" type="text" placeholder="Mobile Number" required="required" data-error="Phone number is required">
<input id="contact_form_number2" name="number2"class="input_field contact_form_number2" type="text" placeholder="Landline Number">
<button id="contact_send_btn" type="submit" onclick="FormSubmit()" class="contact_send_btn trans_200" value="Submit">send</button>
</form>
</div>
Please make me feel silly and point out the typo or logic mistake as I've been stuck on this for a while.
You have to hide the #AlertSuccess in default and on form submit, call the show() to display the message.
And you have forgot to close the bracket in $('#AlertSuccess'.show('fade');.
It should be
$('#AlertSuccess').show('fade');
function FormSubmit(){
$('#AlertSuccess').show('fade');
}
.hidden{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="AlertSuccess" class="alert alert-success collapse hidden">
<!--<a id="CloseAlert" href="#" class="close">×</a> -->
<strong>Awesome</strong> We will contact you shortly
</div>
<div class="contact_form_container">
<iframe name="keepitneat" style="display:none;"></iframe>
<form id="contact_form" class="contact_form" action="/contact_send_btn.php" method="post" target="keepitneat" onsubmit="FormSubmit()">
<input id="contact_form_name" name="name" class="input_field contact_form_name" type="text" placeholder="Name" required="required" data-error="Name is required.">
<input id="contact_form_email" name="email"class="input_field contact_form_email" type="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
<input id="contact_form_number1" name="number1"class="input_field contact_form_number1" type="text" placeholder="Mobile Number" required="required" data-error="Phone number is required">
<input id="contact_form_number2" name="number2"class="input_field contact_form_number2" type="text" placeholder="Landline Number">
<button id="contact_send_btn" type="submit" onclick="FormSubmit()" class="contact_send_btn trans_200" value="Submit">send</button>
</form>
</div>
The browser console (F12) should tell you about the syntax error in you javascript. You forgot the closing ) in $('#AlertSuccess'.show('fade');.
$('#AlertSuccess').show('fade');
I have two inline radio button in a form using Bootstrap. But when I validate it then the message showing inside of first radio button instead of showing after second radio button. I would like to show that radio button message like Email and password. Here is the screenshot of my form.
Without Validation:
With Validation:
HTML Form:
<form name="registration" action="">
<div class="signingInner">
<h4 style="font-weight: 500; text-align:center; font-size: 20px ">Sign in to your Account</h4>
<div class="form-group">
<label for="emailId">Email Address:</label>
<input type="text" class="form-control" id="login_email" name="login_email" placeholder="Please enter Email address">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" name="login_password" id="login_password" placeholder="●●●●●●">
</div>
<div class="form-group">
<div class="radio-inline" style="padding-left: 100px;">
<input type="radio" id="user" name="LoginMode" value="user" >
As <strong>User</strong> </>
</div>
<div class="radio-inline" style="padding-left: 30px;">
<input type="radio" id="company" name="LoginMode" value="company" >
As <strong>Company</strong></>
</div>
</div>
<input type="submit" name="btnLogin" class="btn btn-lg btn-primary btn-block" value="Login"></input>
</div>
</form>
Plunker Link:
https://plnkr.co/edit/0vpvU9QbRu8Mlwbi04ti?p=preview
The trick is to use errorPlacement callback function.
So I am checking whether the rendered type is radio button then I am tracking the appropriate topmost parent div and inserting the message after that.
errorPlacement: function(error, element) {
if ( element.is(":radio") ) {
error.insertAfter( element.parent().parent().parent().parent());
}
else { // This is the default behavior of the script for all fields
error.insertAfter( element );
}
},
See the updated plunkr here.
And the output looks like
EDIT:
I have finally updated the original plunkr provided by you.
I'm using Stripe's jQuery plugin to validate credit card entry fields before details are being sent off for server side validation, but using Stripe's example my form will not submit, even when credit card data is valid.
The server side validation catches any issues, but I'd like to give users isntant feedback if there's an error in their data before it goes off to the server.
Stripe's jQuery plugin: https://stripe.com/blog/jquery-payment.
Their example: http://stripe.github.io/jquery.payment/example/
I'm using Bootstrap 3.3.4 and jQuery 1.11.2
My Form:
<form novalidate autocomplete="on" name="securepay" id="securepay" method="post" action="?func=validate" data-toggle="validator">
<div class="form-group col-sm-6">
<label for="cc-number" class="control-label">Card Number:</label>
<input id="cc-number" name="cc-number" type="tel" class="form-control cc-number paymentInput" autocomplete="cc-number" placeholder="•••• •••• •••• ••••" data-error="Please enter the long card number" value="" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="cc-exp" class="control-label">Expiry Date:</label>
<input id="cc-exp" name="cc-exp" type="tel" class="form-control cc-exp paymentInput" autocomplete="cc-exp" placeholder="MM / YY" data-error="Please enter the expiry date shown on the card" value="" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label for="cc-cvc" class="control-label">CVC Number:</label>
<input id="cc-cvc" name="cc-cvc" type="tel" class="form-control cc-cvc paymentInput" autocomplete="off" placeholder="•••" data-toggle="popover" data-trigger="focus" data-placement="right" title="CVC Security Number" data-content="On most cards, the 3-digit security code is on the back, to the right of the signature. On American Express cards, the 4-digit security code is on the front, to the top-right of the card number." data-error="Please enter the CVC number" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="cc-name" class="control-label">Name on Card:</label>
<input id="cc-name" name="cc-name" type="text" class="form-control cc-name paymentInput" autocomplete="cc-name" data-error="Please enter your name as specified on the card" value="" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="cc-terms" required><span class="text-info small">Please confirm that you agree to our Terms and Conditions</span>
</label>
</div>
</div>
<div class="form-group col-sm-12">
<button type="submit" id="secure-submit" class="btn btn-primary margin-10">Make Payment</button>
</div>
</form>
My Javascript:
$(function () {
$('[data-toggle="popover"]').popover({container: 'body'})
//Form Validation
$('#securepay').validator()
//$('[data-text]').payment('restrictText');
$('.cc-number').payment('formatCardNumber');
$('.cc-exp').payment('formatCardExpiry');
$('.cc-cvc').payment('formatCardCVC');
$.fn.toggleInputError = function(erred) {
this.parent('.form-group').toggleClass('has-error', erred);
this.parent('button').toggleClass('disabled', erred);
return this;
};
$('form').submit(function(e) {
e.preventDefault();
var cardType = $.payment.cardType($('.cc-number').val());
$('.cc-number').toggleInputError(!$.payment.validateCardNumber($('.cc-number').val()));
$('.cc-exp').toggleInputError(!$.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal')));
$('.cc-cvc').toggleInputError(!$.payment.validateCardCVC($('.cc-cvc').val(), cardType));
$('.cc-brand').val(cardType);
});
});
The problem is it uses e.preventDefault(); which causes the form to not submit, even if the validation passes.
I'd like to use preventDefault(); to stop the form from being submitted if there's an error, but what would be the best way implament it so that the form will submit when the validation passes? I'd tried a few different options, but I just don't seem to be able to get it to work the way I want it to.
at the end of your function you can add
$(this).unbind('submit').submit()
if the validation passed.
maybe I am a little late, but perhaps it can be useful to someone..
$('form').submit(function(e) {
e.preventDefault();
var cardType = $.payment.cardType($('.cc-number').val());
$('.cc-number').toggleInputError(!$.payment.validateCardNumber($('.cc-number').val()));
$('.cc-exp').toggleInputError(!$.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal')));
$('.cc-cvc').toggleInputError(!$.payment.validateCardCVC($('.cc-cvc').val(), cardType));
$('.cc-brand').val(cardType);
//check if there are errors
if(!$('.has-error').length) {
// The answare of #loli
$(this).unbind('submit').submit();
}
});