I am working on a project in which I am using Aurelia for the front end.I am facing an issue for many days but still didn't find any solution I am new in Aurelia and I had tried everything.
In this picture you can see there is a required field and a button when we click on this button this should paste the client name in text field everything working fine.
but there is an issue when I am typing anything in the text field and then removing everything and then I click on the button so its saying field is required.
I understood the problem the problem is my validation is triggering on DOM blur event and when I am changing focus the required validation is triggering.
is there anything I can do?
here is some code snippet.
.ensure('candidatevalidatedby')
.displayName('Validated by')
.required()
.maxLength(60)
and
<div class="form-group">
<label>Candidate’s ID validated by *</label>
<input class="form-control" value.bind="candidate.candidatevalidatedby & validate" />
</div>
Thanks In Advance.
Edit: This issue is fixed.
<div class="form-group">
<label>Candidate’s ID validated by *</label>
<input class="form-control" value.bind="candidate.candidatevalidatedby & validateOnChange" />
</div>
This is the solution.
<div class="form-group">
<label>Candidate’s ID validated by *</label>
<input class="form-control" value.bind="candidate.candidatevalidatedby &
validateOnChange" />
</div>
it's working fine.
http://aurelia.io/docs/plugins/validation#validate-binding-behavior
Add max length attribute to your input element. It will work.
Related
One of my test scenarios has an On-Off toggle button and I want to check is it on or off?
The button value has an internal checkbox so I used a JQuery to get the checkbox value but I am getting a null value.
JavascriptExecutor js = (JavascriptExecutor)getDriver();
System.out.println(js.executeScript("$('#f-contact-usactive').is(':checked')"));
<div class="col-3">
<div class="label">Display Contact Us
<i title="If this field is left blank, it will revert to
the default Teleflora/group value."
class="icon icon-tool-tip icon-tool-tip-federated">
</i>
<i title="This controls whether or not your address and
phone number will show on the about us page."
class="icon icon-tool-tip x-space-s">
</i>
</div>
<input checked="" type="checkbox" id="f-contact-us-active"
name="f-contact-us-active" class="on-off-switch">
<label for="f-contact-us-active" class="on-off-switch-label">
<div class="on-off-switch-state">on</div>
</label>
</div>
Please help me to get the value
your id is not correct in JQuery selector. it should be something like this. "$('#f-contact-us-active').is(':checked')".
I think your id for the checkbox is "f-contact-us-active" but in the script you are accessing "f-contact-usactive" missing a '-'.
Or have you done the typo here?
Thanks for the inputs and I got the solution
System.out.println("The Toggle value is: "+((JavascriptExecutor)getDriver()).executeScript("return document.getElementById('f-contact-us-active').checked"));
I would need a good way to verify error icon is shown for mandatory form fields when submitted with empty input using selenium 3 webdriverjs.
Below is part of DOM trace when error is thrown if mandatory field is left blank & form is submitted.
<div class="col-md-8 col-sm-8 col-xs-8 " style="display: inherit;">
<div class="vx_floatingLabel_complex vx_floatingLabel_active vx_has-
error-with-message ">
<label for="testerAccountData_phone">Telefone</label><div
class="vx_form-control" data-label-content="Telefonnummer" style="">
<input type="tel" maxlength="20" value="" autocomplete="off"
name="/testerAccountData/phoneNumber" id="testerAccountData_phone">
</div><span class="vx_form-control-error-icon icon icon-small icon-
critical-small"></span><span></span><span></span></div></div>
I am looking at validating multiple fields in the form,
Q: how do I use selenium to check if error icon appears for the field. i'm not sure if i can use getAttribute function, as error icon seems to be part of CSS element?
=> class="vx_form-control-error-icon icon icon-small icon-critical-small">
Once you confirm that you can select the element. Selenium has the element.isDisplayed() api that can help you determine if the element is visible
http://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebElement.html
https://github.com/SeleniumHQ/selenium/blob/master/javascript/node/selenium-webdriver/lib/webdriver.js#L2160
//untested code:
driver.findElement(By.className('vx_form-control-error-icon')).isDisplayed();
I'm still learning, please help!
I am trying to apply a Modal Popup that appears only when a link is clicked instead of when the page loads. My Modal Popup does all work fine, but I want to turn off/prevent the Popup from appearing at all when the page loads and simply have it only invoke the Popup when my chosen link is clicked.
$(document).ready(function () {
$("#popup-1").myModal({
// Functionality goes below this line
});
});
And this
<div id="popup-1" class="myModal">
<div class="window">
<!-- Your popup content -->
<div class="wrap demo-1">
<div class="title">Some Text Here</p>
<form>
<input type="text" class="field" placeholder="Your email goes here" />
<input type="submit" class="closeModal send" value="Submit" />
</form>
<label class="deny closeModal">Some Text Here</label>
</div>
<div class="cta demo-1">
<span class="icon"></span>
<p>Some Text Here</span></p>
</div>
<!-- / Your popup content -->
</div>
</div>
Is there a simple fix I can apply to solve this issue? I have spent countless hours going through existing posts and forums but almost each enquiry doesnt target the same specific question im trying to achieve based on my actual existing code.
My cose for the Link Click to activate
Newsletter
your help is very much appreciated
Just execute your modal opening code when a link is clicked instead of when the ready event is fired :
$('#modal-link').on('click', function() {
$("#popup-1").myModal({
// Functionality goes below this line
});
});
assuming the link opening your modal is :
link
I have a Bootstrap Modal in which I am trying to display a select2 control. The control shows up and it works perfectly well but it doesn't display properly. I have attached a screenshot of how it is rendering as. I also copied and pasted the exact same code to a regular page and that is displaying properly. I inspected the border property as well as various other css properties but am unable to determine why it is displaying like that. Can anyone give me some pointers on how I can solve this issue?
JsFiddle showing the issue
Note: Please maximize the width of the result window to see the issue in action.
Html:
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">Country</label>
<div class="col-sm-6">
<select class="js-example-basic-single form-control">
<option></option>
<option>Canada</option>
<option>Mexico</option>
<option>United States</option>
</select>
</div>
</div>
</form>
Javascript:
$('.js-example-basic-single').select2({
placeholder: "Select country..."
});
EDIT:
I would also like to point out there is a dependency to the select2-bootstrap library. If I use just the select2 library, I am not witnessing this issue.
I create one Method in MVC 4.0 which taking the Request.Form (Namevaluecollection) in Form. I faced below issue in checkbox and radio button.
I added dynamically checkbox or radio button with below code, and I set the form value collection as "NameValueCollection formsCollection = Request.Form" in one of my controller method but that checkbox or radio button is not coming in "formsCollection.AllKeys" while other control like text box, text area, dropdown will work properly.
<form>
<div class="divLeft div1" id="div83ac0fad-41d5-40e5-99cd-f99ea8877b04">
<div class="control-group">
<label class="control-label">Checkbox 2</label>
<div class="controls">
<div id="cfCheckbox">
<label>Option 1</label>
<input type="checkbox" id="checkbox83ac0fad-41d5-40e5-99cd-f99ea8877b04" name="checkbox83ac0fad-41d5-40e5-99cd-f99ea8877b04">
<label>Option2</label>
<input type="checkbox" id="checkbox83ac0fad-41d5-40e5-99cd-f99ea8877b04" name="checkbox83ac0fad-41d5-40e5-99cd-f99ea8877b04">
</div>
</div>
</div>
</div>
</form>
You're having id="checkbox83ac0fad-41d5-40e5-99cd-f99ea8877b04" on both check-boxes and the main div. IDs in HTML are supposed to be unique.
Remove the IDs on the checkboxes. This should fix your problem.
FormsCollection uses Name for binding, not ID. So you don't really need your elements to have IDs.