What is the best way to extract several form elements and assign a new attribute to each of them?

<form name="myform">
      <fieldset>
          <legend>Delivery Information</legend>
          
          <p>Country: <input pattern="^[A-Za-z]" type="text" name="textInput" size="25" placeholder="input country..."></p>
          <p>Street: <input pattern="^[A-Za-z0-9]" type="text" name="street" size="30" placeholder="input street..."></p>
          <p>City: <input pattern="^[A-Za-z ]" type="text" name="textInput" size="20" placeholder="input city..."></p>
          <p>Zip: <input pattern="(\d{5}([\-]\d{4})?)" type="text" name="zip" size="5" placeholder="#####"></p>
      </fieldset>
</form>

My goal is to use plain JavaScript without jQuery to gather all input elements with the name "textInput" and add the attribute 

oninvalid="please, only use letters"
to them within the DOM.

This task involves manipulating the document using JavaScript exclusively.

javascriptformsdominput

Answer №1

Implementing the following function will help:

function updateAttributes() {
    var elements = document.querySelectorAll("[name='inputText']");
    for(var i = 0; i < elements.length; i++) {
        elements[i].setAttribute("onerror", "please enter valid input");
    }
}

Answer №2

Check out the solution below:

 $('input[name=textInput]').attr("oninvalid", "please, restrict use to letters only");

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jQuery does not have the capability to access the href attribute through DOM manipulation

I've been trying to extract the href attribute from a link in my code and create a new link using that attribute. However, I'm facing an issue where the created link doesn't seem to work properly - it keeps showing a 404 error message like t ...

javascriptjqueryhtml

There are no HTTP methods being exported in this specific file. Remember to export a named export for each individual HTTP method

Currently, I am working on a React.js/Next.js project that incorporates Google reCAPTCHA. The frontend appears to be functioning properly as I have implemented print statements throughout the code. However, I am encountering an error in the backend display ...

javascriptreactjstypescriptnext.js

`Discover the latest version of Tailwind using JavaScript or PHP`

My setup includes Laravel v8.81.0 (PHP v8.1.2), Vue v3.2.30, and Tailwind https://i.sstatic.net/fVbJB.png I am looking to fetch the Tailwind version in JavaScript similar to how I can get the Vue version using: //app.js require('./bootstrap'); ...

javascriptlaravelvue.jstailwind-css

Stop the background from scrolling and prevent auto-jumping to the top on mobile devices

When users click on the hamburger icon in the top right of our mobile site, I want the drop-down menu to appear and be scrollable without the background scrolling. I tried using JavaScript to set the body to fixed when the menu icon is clicked, but this ca ...

javascriptjqueryhtmlcss

Troubleshooting: Issue with append function not functioning properly after click event in Angular

I am struggling to implement a basic tooltip in AngularJS. Below is the HTML I have: <span class="afterme" ng-mouseover="showToolTip('this is something', $event)" ng-mouseleave="hideToolTip();"> <i class="glyphicon glyphicon-exclama ...

javascriptjqueryangularjs

Is it feasible to retrieve an object from AWS S3 in Blob format using AWS SDK for JavaScript V3?

Currently, I am working on a project utilizing Next.js and I am facing the task of uploading photos to a Bucket S3. In order to stay up-to-date with the latest technology, I have chosen to utilize the latest version (3) of AWS SDK for JavaScript. After se ...

javascriptamazon-web-servicesamazon-s3next.jsblob

Exploring the functions of the elasticsearch javascript library: Understanding the search_type feature

Currently, I am attempting to run a search query using search_type of count with the elasticsearch.angular.js version sourced from the npm module. The query can be successfully executed as follows: POST /index1/type1/_search?search_type=count { " ...

javascriptangularjselasticsearchnpm

What is the best way to save an object in a variable in MeteorJS/React for future retrieval?

This code snippet is located at the bottom of a component called 'Block'. export default theBlockContainer = createContainer(({ params }) => { return { voteStatus: Meteor.user()['listofvoted'], } }, Block); Although the ...

javascriptmeteorreactjs

When the input field is cleared, JavaScript will not be able to recognize its contents

Having an issue with my function that fetches results, <script language="javascript"> function fetchResult(value){ url="ajax_fetch.php?st=usr&q="+value; ajax(url); } fetchResult(" "); </script&g ...

javascriptphphtml

Changing class names when removing an element from an array

I have a data table where users can input information: <tbody> <tr class="wiring_details_6-73" id="wiring_rows_0"> <td colspan="2"> Wire Type: <select class="wire_selector_0" id="wiring_select_0" name="select_w ...

javascriptjqueryarraysclassrename

What sets Java classes apart from JavaScript classes?

After working with C# and Java, I decided to dive into learning javascript/node.js. However, I am facing some challenges trying to understand what is wrong with this code. Here is the snippet from my main.js file: const MyClass = require("./MyClass"); le ...

javascriptjavanode.js

When a fetch request is called inside a map function in React, the return

I attempted to retrieve a map array through fetch resolves so that each element inside favoriteCards would return a value and assign it to the test variable useEffect(() => { const test = favoriteCards.map((card) => { accuWeatherApi.getCurrentW ...

javascriptreactjs

Data update using AJAX and codeigniter was unsuccessful

How can I update my data using Codeigniter and AJAX for submitting the response? Below is the View section of my code: <form id="form_update" action="<?php echo base_url() ?>admin/update_derap_info" method="POST" role="form"> <textare ...

javascriptphpjqueryajaxcodeigniter

Image not appearing when sharing on Facebook

I've been trying to create a Facebook share button using the Javascript SDK, and here is the code I have been utilizing: $(function() { $('.facebook-share').click(function(e) { e.preventDefault(); FB.ui({ method: 'feed& ...

javascripthtmlfacebook

Having trouble with Javascript's JSON.stringify or PHP's json_decode?

I am attempting to send an array from JavaScript to PHP. JavaScript: var json = JSON.stringify(extraFields); url += "&json="+json; PHP: $json = json_decode($_GET['json'], true); foreach($json as $K=>$V){ echo "json".$K . "=" . $V ...

javascriptphpjsonstringify

Updating input values in AngularJS using a custom directive in AngularJS

When the value of an input does not meet a certain condition, I need to change it. In this example, if the unit price input is changed to a non-numeric value when adding a Detail, I want to set the value to "0.00". scope.$watch(attrs.ngModel, function(new ...

javascriptangularjsangularjs-directiveangularjs-scope

Is it possible to combine EJS compilation and html-loader in the html-webpack-plugin?

I need the html-webpack-plugin to generate my html using my .ejs template that contains <img> tags. The html-loader can update the image URLs in my <img> tags created by Webpack, so I am including it in my configuration: test: /& ...

javascripthtmlwebpack

Utilizing BackboneJs to Access and Fetch Data from an asmx Webservice

Could someone please help me with a code snippet to understand how to call asmx web services from a backbone collection? The provided example is very simple. Collection window["Persons"] = Backbone.Collection.extend({ model: Person, url: ...

javascriptajaxbackbone.jsasmxunderscore.js

The Next.js developer encounters an issue where the build fails due to a ReferenceError on a client component, stating that "window

Just starting out with nextjs, I'm sticking to using only the basic features without diving into any advanced functionalities. During the next build process, I encountered an issue where 6 paths failed because of a ReferenceError: window is not defin ...

javascriptreactjsnext.js

Why isn't the hover function working on the table row element?

When I try to apply a hover effect on tbody and td elements, it works perfectly. However, when I apply the same effect to the tr element, it doesn't work as expected. I am using inline style (js pattern) rather than CSS code and incorporating Radium i ...

javascriptcssreactjs