Develop Reference

In Cypress how to select input element based on name?

I'm starting to learn Cypress. I want to select the input field and provide the phone number by using cypress.io. The code I have following but it does not work. However can I using find or there is another way to get the input element to type in phone number?
cy.get('div').contains('Phone Number').find('input[name=teacher[0].number]').type('8000-1612023')
<div class="required field">
<label>Phone Number</label>
<div title="Teacher number" class="ui fluid right labeled input no-spinners">
<input required="" type="number" name="teacher[0].number" value="">
<div class="ui label label">US</div>
</div>
</div>

Why don't you directly target the input field using the following code
cy.get('input[name="teacher[0].number"]').type('8000-1612023')
Please find the screenshot below for a successful test. I would also recommend you to change the type of input in your HTML to tel
HTML:
<input required="" type="tel" name="teacher[0].number" value="">
Cypress:
describe('Trial', function() {
it('Test', function() {
cy.visit('http://localhost:8080/trials/')
cy.get('input[name="teacher[0].number"]').type('8000-1612023')
})
});
Test Result:

Try this instead:
cy.contains('div', 'Phone Number').find('input').first().type('8000-1612023')
The first argument to contains tells cypress to find the element with that selector that contains the text.

I write selectors with the input tag as below and it worked for me.
cy.get('input[name="elementName"]').type(val)
Check this to learn best practices when selecting elements:
https://docs.cypress.io/guides/references/best-practices#Selecting-Elements

jQuery targeting selector by input type and form name

I want to target any input of text type belonging to a form of a specific name. Because the form will have numerous input fields, I don't want to target a particular input name, but rather, capture the blur (or focusout) event for any input[type="text"] occurring within the form wrap.
My present code, which doesn't work:
$( document ).ready(function() {
$('form[name="tax_form"] input[type="text"]').on("blur",function() {
alert($(this).val());
});
});
I answered my own question. Because the code sample is essentially correct, there is no need for multiple people to try to solve the unsolvable. The problem had something to do with where I placed the javascript code, and nothing to do with structure or syntax of the code, itself.

The way the event "change" works is what it sounds like you want. An event handler doesn't actually fire when the input is clicked or if text is keyed in, it fires when text is entered and then the input loses focus.
In the following Snippet the same selector you are using is delegated to the "change" event. You'll notice that the ['tax_form'] has 4 text inputs yet the last one is the only one working. The reason is because if an input isn't assigned a type attribute, then by default type is 'text". So when using a selector based on an input's type="text", you must keep that in mind. So if you are in full control of your HTML, make sure that each input has a type attribute with an explicit value, or use classes which is better IMO.
SNIPPET
$(document).ready(function() {
$('form[name="tax_form"] input[type="text"]').on("change", function() {
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='notIt'>
<fieldset>
<legend>Not a Tax Form</legend>
<input>
<input type="text">
<input>
<input type="text">
</fieldset>
</form>
<br/>
<br/>
<form name='stillNotIt'>
<fieldset>
<legend>Still not a Tax Form</legend>
<input type="text">
<input>
<input type="text">
<input>
</fieldset>
</form>
<br/>
<br/>
<form name='tax_form'>
<fieldset>
<legend>Tax Form</legend>
<input class='klass' value='TEXT INPUT BY DEFAULT'>
<input value='TEXT INPUT BY DEFAULT'>
<input name='text' value='TEXT INPUT BY DEFAULT'>
<input type='number'>
<input type='text' value='THIS ONE COUNTS'>
</fieldset>
</form>

Previous commentators were right, that my code was fine as-is. I took my selector code out of a header script file, and placed it at the bottom of my footer script, and it worked as expected.
In the end, it wasn't my code that was the problem, but rather something to do with where I placed it. Possibly other javascript or jQuery code stepping on it.

Your code should work fine. Here's a working example of it to prove it's working. The tax_form fields should console.log() on blur. The another_form should not.
$(function() {
$('form[name="tax_form"] input[type="text"]').on("blur",function() {
console.log($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Tax Form</h1>
<form name="tax_form">
<input type="text" name="first" value="first">
<input type="text" name="second" value="second">
<input type="text" name="third" value="third">
</form>
<h1>Another Form</h1>
<form name="another_form">
<input type="text" name="first2" value="first2">
<input type="text" name="second2" value="second2">
<input type="text" name="third2" value="third2">
</form>

jQuery: check input with name attribute for hasClass

What I'm trying to do is check if input with name attribute "Name" has a class of "input-validation-error", if so apply css to the label with for attribute of "Name".
if ($("input[name='Name']").hasClass("input-validation-error"))
{
$("label[for='Name']").css("color:red");
console.log('here');
}
This doesn't seem to work. Any ideas?
Markup:
<label for="Name">Name</label>
<input class="input-validation-error" data-val="true" data-val-required="field is required" id="Name" name="Name" placeholder="Full Name" type="text" value="">

Instead of
$("label[for='Name']").css("color:red");
Try
$("label[for='Name']").css("color","red");
Read more on .css() here
OR
Instead of
$("label[for='Name']").css("color:red");
Try
$("label[for='Name']").attr("style","color:red");
The html provided in updated question and with above jquery modification its working see here.
As per the questioner comments below this answer , i think the questioner is adding HTML dynamically inside DOM so in that case use event delegation read more here.

How to retrive name property of previous attribute

hi i am newbie in jquery..
i have code like follow
<input type="text" name="name" id="name">
Remove
my question is how can i pass name property of textbox in function dele()?
i am trying to do is
<input type="text" name="name" id="name">
Remove
but it's giving me error. i don't how can i retrieve it?
Thanks in advance

try this:
<input type="text" name="name" id="name">
Remove
jQuery
$(document).ready(function(){
$('.link').click(function(){
var name = $(this).prev().attr('name');
});
});

prev is a method that comes with jQuery. this is an instance of JS Native DOM element. use $(this) to make a jQuery Instance.
dele($(this).prev().attr('name'))

jQuery closest() not working for me (or i'm not working for it)

Given this jQuery:
$('div.MvcFieldWrapper :input').focus(function() {
$(this).closest('label.MvcDynamicFieldError').fadeOut();
});
And given this HTML:
<div class="MvcFieldWrapper">
<label class="MvcDynamicFieldPrompt">Enter your email address:</label>
<label class="MvcDynamicFieldError">Required</label>
<input type="text" value="" />
</div>
Why is the label not fading out when I focus on the input? I know for sure that the focus event is happening.
Thanks

Closest looks through the "parents" not siblings. What you want is prevAll:
$('div.MvcFieldWrapper :input').focus(function() {
$(this).prevAll('label.MvcDynamicFieldError').fadeOut();
});
closest actually means "find the closest ancestor that matches the selector, including the already selected element if it meets the requirements."