Yii2 HTML helper input must be marked as required

This is the form I have generated using the HTML helper:

<div class="row">
  <div class='form-group col-lg-6 col-sm-6'>
    <?= HTML::label('Name:','PropertyContactsNew',['class' => 'control-label']); ?>
    <?= HTML::textInput("PropertyContactsNew[{$slug_other_contacts}][name][]", '', ['maxlength' => 50, 'class'=>'form-control']) ?>
  </div>
  <div class='form-group col-lg-6 col-sm-6'>
    <?= HTML::label('Company:','PropertyContactsNew',['class' => 'control-label']); ?>
    <?= HTML::textInput("PropertyContactsNew[{$slug_other_contacts}][company][]", '', ['maxlength' => 100, 'class'=>'form-control']) ?>
  </div>
</div>

I'm looking for a way to indicate required fields in this form and prevent submission if they are empty. I cannot use ActiveForm for some reasons. Do I need to use a JavaScript library for this functionality?

javascriptyii2

Answer №1

There could be a necessity for

<?= HTML::label('Full Name:','ContactInfo',['class' => 'control-label','required'=>true]); ?>

Answer №2

In my opinion, developing a FormModel that inherits from the Model class would allow you to manage all the necessary validations effectively.

Answer №3

Necessary in red

Only this piece of code is functioning for me. Div containing class required

<div class="form-group required">
     <?= Html::label('Entered value', 'entered_value', ['class' => 'control-label']) ?>
</div>

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

Expand the boundaries of the MUI Select to encompass a different element

Is there a way to extend the border of the MUI Select dropdown menu around the IconButton next to it? I have set up sorting options (A-Z, newest-oldest) using the Select component and included a button to reverse the direction (Z-A, oldest-newest). However ...

javascriptreactjsselectmaterial-uiborder

Invoke ajax to reset session once user navigates away from page

I am looking for a solution to automatically clear the PHP session array every time a user exits my webpage. However, I need to exclude cases where the user clicks on links with query strings. I attempted using Javascript code, but it did not work as expec ...

phpjavascriptjqueryajaxregex

Analyzing two arrays and utilizing ng-style to highlight matching entries within the arrays

My list displays words queried from a database, allowing me to click on a word to add it to another list that I can save. This functionality enables me to create multiple word lists. My goal is to visually distinguish the words in my query list that have a ...

javascriptangularjsarraysng-classng-style

NPM encountered difficulties in resolving the dependency tree

I seem to be encountering a persistent issue that I cannot resolve on my own. My attempt to update webpack and webpack-cli in a project has been met with repeated errors of this nature: npm install webpack@latest --save-dev npm ERR! code ERESOLVE npm E ...

javascriptnode.jsnpmbundlerwebpack-5

What could be causing the appearance of a mysterious grey box hovering in the upper left portion of my image and why is the code only adjusting the size of the grey box instead of the entire

I've been working on embedding some JavaScript into my Showit website to create a drag-and-drop feature that displays a collage/mood board effect. Everything is functioning correctly, but I'm running into issues with resizing the images. There&a ...

javascripthtmljquerycss

Tooltips experience issues when interacting with elements that do not utilize the :active state

$(function () { $('[data-toggle="tooltip"]').tooltip() }) <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

Is there a way to get Axios to display CSS on the page?

While working on a Web Viewer project with axios for web scraping practice, I encountered an issue where the CSS wasn't loading properly. Here is the code snippet I used: console.log("Tribble-Webviewer is starting!") const express = requir ...

javascriptcssexpressaxios

Implementing external JavaScript files such as Bootstrap and jQuery into a ReactJS application

Just diving into ReactJs, I've got static files like bootstrap.min.js, jquery.min.js, and more in my assets folder. Trying to incorporate them into my ReactJs App but running into issues. Added the code below to my index.html file, however it's ...

javascriptjqueryreactjsbootstrap-4

What are the steps to utilize chrome.tabs.onUpdated.addListener?

I am currently working on a Chrome extension where I need to display an alert() showing the page URL whenever the user switches tabs or enters a new URL in a tab. However, my current implementation is not functioning as expected: chrome.tabs.onUpdated.ad ...

javascriptgoogle-chrome-extension

Transferring a JSON array from Google App Engine to Cloud Storage using GO

I am attempting to upload a JSON array to Google Cloud Storage, which is posted by an App Engine application using the code below: saveData : function saveData() { var _this = this, save = this.shadowRoot.querySelector('#save-data'), ...

javascriptjsongoogle-app-enginegogoogle-cloud-storage

What is the best way to establish a limit on the number of characters that can be entered into an input field in a React form?

Currently, I am creating a tool to check the strength of passwords based on their length. However, I am unsure of how to precisely determine if a password falls within specific length ranges such as "between 5 and 10 characters" or "between 20 and 30 cha ...

javascriptreactjs

Exploring ways to overlay 2D text onto my Blender-created 3D model

Having created a 3D model with Blender, I am trying to overlay 2D text over the different meshes of the model. While I have successfully changed the colors of the meshes based on their indices using diffuse.color, I am struggling to draw text over my mesh. ...

javascriptthree.jsblenderbabylonjs

navigation menu 'selective emphasis' feature

I have created a JQuery script that will highlight the 'About', 'My Projects', or 'Contact Me' text on the navigation bar when the corresponding section of the page is in view. To achieve this, I am using a scroll() event list ...

javascriptjquerycsstwitter-bootstrap

Duplicate entries being saved in the database due to Ajax calls

I am currently utilizing Fullcalendar jQuery with PHP for managing events. I am making an AJAX call to add events, and while it works fine for the initial event entry after a page refresh, it starts creating duplicate events for subsequent entries. I am un ...

javascriptphpjqueryajaxfullcalendar

The server sends a response with a MIME type that is not for JavaScript, it is empty

I am trying to integrate an angular application with cordova. Upon running "cordova run android" and inspecting it in Chrome, the console displays the following message: "Failed to load module script: The server responded with a non-JavaScript MIME t ...

javascriptandroidangularcordovamime

The v-list-group does not automatically expand sub-groups based on the path specified in the group prop

I have a navigation sidebar that includes nested v-list-groups. Based on the documentation, the "group" prop of v-list-group should expand based on the route namespace. To see more information, visit: https://vuetifyjs.com/en/components/lists/ While this ...

javascriptvue.jsvuetify.js

Top choice for recording sound and video over the internet

Seeking assistance in finding solutions to enable recording audio and video via web on different platforms such as iPhone and iPad. The recorded media needs to be saved on the server. Any recommendations for a cross-browser compatible approach are apprecia ...

javascriptvideo-captureaudio-recording

When sending an AJAX request to a URL, can I verify in the PHP page whether it is a request or if the page has been accessed?

In order to enhance security measures, I need to prevent users from accessing or interacting with the php pages that will be utilized for ajax functionality. Is there a method available to determine if a page has been accessed through an ajax request or b ...

phpjavascriptjqueryajax

Trouble with comparing two datetime values in JavaScript

I have a dilemma with two different appointments: appointment1 = "2013-07-08 12:30:00" appointment2 = "2013-07-08 13:30:00" My goal in JavaScript is to compare these two appointment dates. If they don't match, I want to remove the appointment; if t ...

javascriptjquerydatetime

The Ajax function effortlessly receives the returned value and smoothly transitions to the error handling stage

When trying to retrieve data from an ajax request, my function needs to receive the returned data as an array of strings. During debugging, I am able to see the response, but at the same time, the error function is triggered. This is how my code looks: ...

javascriptjqueryajax