How to validate an element using bValidator - jquery-plugins

For ex:
I have two elements in form as given below.
Alphabetic characters only:
<p>
<input id="lname" data-bvalidator="alphanum,required" type="text">
</p>
My requirement is, onblur of each element I need to save the value into database.
So, I can use ValidateOn:'blur', onAfterElementValidation settings and if element is valid I can save the data. But when I submit the form, again its validating and trying to save the data.
In jQuery Validator, we can validate an element like
$('#fname').isValid()
same as I would like to know is there any option in bValidtor to validate an elements individually.

In bValidator you can validate an element individually like this:
$('#yourFormID').data('bValidator').validate(false, $('#fname'))
look at the validate() function in the documentation:
http://karmela.fsb.hr/~bmauser/bvalidator/documentation.html#validate.
With first argument (true/false) you controll display of error message tooltip.
And as of version 0.52 you can check if element is valid with:
$('#yourFormID').data('bValidator').isValid($('#fname'))

Related

Getting dynamic selector in Cypress

I am working on Cypress and want to get a dynamic selector that always changes.
For example,
<div class="Select-value">
<input id = "react-select-9--value">
I want to get this input value but the number "9" for the ID changes every time I run the test. There is no other selector I can pick for this and there are other inputs on the same page with IDs like react-select-10--value, react-select-11--value.
What is the right way to get this type of selector in Cypress?
Thanks in advance!
You can aim for a relative element.
The only one shown above is the <div>, so using that as an example
cy.get('div[class="Select-value"]')
.find('[id^="react-select"]') // ^= means "starts-with"
.eq(0) // first one, because it looks like that above
Post a bigger example of the HTML if that's no good for you.

I want to use a jquery function for th:onclick ... I can not speak English well

enter image description here
enter image description here
1)in the second picture Even fn_del is not recognized.
2)I want to use jquery function in the <button id="fileDel" th:onclick= part, please help
You are iterating input parameters with same id so you need to class or other attribute to identify FILE_NO, FILE_NAME. Also you can use just button's onclick action.
<input onclick="fn_del()"/>
there will be more than one button and input parameters because you define in a foreach loop.
Make sure that files variable have FILE_NO as well.

How to keep the previous form parameter to current form, after validation

I have 2 forms, form A + B
I choose an option from form A and passes great to form B.
After validation of the form B tho I loose selected option from the form A.
In the Controller of the form B I get the option from the form A like this
$option = $request->option;
and I pass it to the view like this:
return view('formB', ['option' => $option]);
Depending the option I show dynamic different title and different form.
So i have 2 questions:
How can i keep the option after validation
and
Is this the right way to do the 2-step forms?
I hope that I was clear enough :)
Thanks in advance
In your form, use old() helper. Eg:
<input type="text" name="name" value="{{ old('name', $user->name) }}"/>
I used Session
It is cleaner and safer to do what i wanted it. The old() helper way it refers only for form inputs... after validation the parameter is gone.
Session::put
and
Session::get
and after
Session:forget

ASP.NET MVC 3. How to place validation summary for one form into another form?

I have a small form which needs validation summary, but this validation summary should be definitly placed on another form.
I know, that there is a restriction - validation summary checks only elements in current form, so what am i searching for is some kind of crunch.
Is there any solution which does nt involve writing own validation and hundreds of lines of Javascript?
There's little information you gave about what are these forms and how they are related or why would you need to move that validation information. Plus lets get thing straight : validation summary doesn't check anything it only displays summary of validation errors. You're right though, summary is presented for the parent form only. If you really wan't to move the summary from one form to another you may want to bind to submit() event and using jquery move the .validation-summary-errors element to the other form.
it is not possible to solve this problem with standart events: before submit event triggered "validate" method Validation Summary is not present on page and callint "validate" stops event dispatching (if you have any errors of cause).
What have i done involves edititng of "jquery.validate.unobtrusive.js". Steps:
1) In "jquery.validate.unobtrusive.js" file in function onErrors I added event dispatching:
function onErrors(form, validator) {
// native code
jQuery("#submitErrorProxy").trigger(jQuery.Event("click")); // my event
}
2) Added hidden input on my form with id="submitErrorProxy"
3) added div container on place where Validation Summary should be displayed.
<div class="form-line" id="validationSummaryContainer">
//validation summary should be moved here
</div>
4) Added next Javascipt method
$("#submitErrorProxy").click(function (e) {
$("#validationSummaryContainer").empty();
$(".validation-summary-errors").clone(true, true)
.appendTo("#validationSummaryContainer");
});
Where clone(true, true) - makes copy of chosen element with all its child elements. And appendTo used instead of move because original validaton summary should be present on original form.
5) Hidden original ValidtionSummary container.
<div class="form-line" style="visibility: hidden; height: 0px">
#Html.ValidationSummary(false)
</div>

Setting a text field that has a JQuery mask on it

Using watir-webdriver, I am trying to set the value for a text field.
browser.text_field(:id, "phoneNumbers_value_input").set("5555551234")
When I run that command, I can see that watir found the field because the cursor is set on that field however no text is entered. I have also tried the send_keys and append commands but nothing seemed to work. No exception is thrown from these methods.
The only difference I could find between this field and the other fields on the page(which all work fine) is that it has this JQuery mask on it.
$(selector).mask("(999) 999-9999");
Any ideas on how to set the text field?
Edit:
Some more of the Javascript:
selector = '#' + id(field.id) + '_input';
if (field.format == 'phone') {
$(selector).mask("(999) 999-9999");
}
HTML of the field:
<div id="phoneNumbers_value_form_item" class="form_item validated no_focus">
<label for="phoneNumbers_value" class="form_label">phone</label>
<input type="text" value="" name="phoneNumbers[][value]" id="phoneNumbers_value_input" class="text">
<div class="tip"> </div>
<div class="tip_validating">
</div>
<div class="tip_error">
</div>
</div>
I don't see any element in the HTML you provided that would match the text input field being addressed in the ruby code at the top of your posting. e.g. there is nothing there with an ID of 'phone'
Based on the HTML in your question, I would expect the following to work
browser.text_field(:id, "phoneNumbers_value_input").set("5555551234")
Looking at the sample page you linked in the comments, when I use google chrome and the "Inspect Element" function on the input field with the ID of 'phone' I see that there are a number of event listeners associated with the field (blur, focus, input, keydown, keypress, unmask)
The 'focus' one gets my attention in particular, and seeing it there on that field makes me think that you might then need to first fire an event against the same element, such as the onfocus event, in order to activate the field, then try to set the value.
You'll notice that when you manipulate things manually, the field starts out blank, but as soon as it gets focus it displays the format for the input mask to the user, it may well be that this needs to happen first, before it see's any kind of input.
EDIT: In this case, based on feedback from the questioner, the answer turned out to be that they needed to first fire the 'unmask' event against the text field, and THEN .set the value they wanted, in order for things to work correctly when automating the testing. This doesn't exercise the field masking functionality, but then again I doubt the test mandate in this instance is to extensively test a 3rd party (JQuery) addin, and they are more concerned with the business logic etc in the back end, thus simply being able to set the value without the masking code getting in the way is what is needed.
The problem has to do with focusing on the text field. Even with a .click() somehow webdriver ends up with the cursor at the end if the input field (see issue 2377). Pressing the HOME key moves the cursor to the beginning and allows you to type in the input field, and still have the mask functionality.
In Java:
WebElement txtPhone = getDriver().findElement(By.id("phoneNumbers_value_input"));
txtPhone.sendKeys(org.openqa.selenium.Keys.HOME);
txtPhone.sendKeys(phoneNumber);

Resources