Alert message in jQuery validation for the chosen option value

I am attempting to validate a combo box with the code provided below. Currently, I receive multiple alert messages even if one condition is true. My goal is to only display one alert message when a condition is met and highlight the other values in red. Thank you.

$(function() {
  $('#issue-form input[type="submit"]').click(function() {
    var TrackID = $('#issue_status_id').val();
    var IssueCF = $('#issue_custom_field_values_55').val();

    if (TrackID == '3' && IssueCF == '157') {
      alert("Please select an option!");
      $("#issue_custom_field_values_55").css("border", "2px solid red");
      return false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="issue-form">
  <div class="splitcontent">
    ... (HTML code omitted for brevity) ... 
  </div>

</form>
<input type="submit" name="commit" value="Create">

I would like the validation process to work as described above, where only one alert message is displayed when a specific condition is met. Any assistance with modifying the JavaScript code would be greatly appreciated. Thank you.

javascriptjqueryhtmlcssvalidation

Answer №1

Utilize the provided code snippet below to eliminate borders:

$(function () {
            $('#issue-form input[type="submit"]').click(function () {
                var TrackID = $('#issue_status_id').val();
                var IssueCF = $('#issue_custom_field_values_55').val();
                var isAlert = 0;
                if (TrackID == '3' && IssueCF == '157') {
                    isAlert = 1;
                    $("#issue_custom_field_values_55").css("border", "2px solid red");
                }
else{
$("#issue_custom_field_values_55").css("border", "none");
}

                TrackID = $('#issue_status_id').val();
                IssueCF = $('#issue_custom_field_values_52').val();

                if (TrackID == '3' && IssueCF == '156') {
                    isAlert = 1;
                    $("#issue_custom_field_values_52").css("border", "2px solid red");

                }
else{
$("#issue_custom_field_values_52").css("border", "none");
}
                TrackID = $('#issue_status_id').val();
                IssueCF = $('#issue_custom_field_values_56').val();

                if (TrackID == '3' && IssueCF == '158') {
                    isAlert = 1;
                    $("#issue_custom_field_values_56").css("border", "2px solid red");
                }else
{
$("#issue_custom_field_values_56").css("border", "none");
}
                if (isAlert === "1") {
                    alert("Kindly select an option!");
                    return false;
                }
            });
        });
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="issue-form">
        <div class="splitcontent">
            <p>
                <select name="issue[status_id]" id="issue_status_id">
                    <option value="1">New</option>
                    <option value="2">In Progress</option>
                    <option selected="selected" value="3">Solved</option>
                    <option value="4">Feedback</option>
                    <option value="5">End</option>
                    <option value="6">Rejected</option>
                </select>

                <p>
                    <label for="issue_custom_field_values_51"><span title="IssueType<" class="field-description">Issue Type</span></label>
                    <select name="issue[custom_field_values][51]" id="issue_custom_field_values_51" class="enumeration_cf">
                        <option value="">--- Please select ---</option>
                        <option selected="selected" value="55">Software Bug</option>
                        <option value="56">Enviromental Bug　</option>
                        <option value="58">Other Factors</option>
                    </select>
                </p>

                <p style="display: block;">
                    <label for="issue_custom_field_values_52"><span title="OrginProcess" class="field-description">Orgin Process</span></label>
                    <select name="issue[custom_field_values][52]" id="issue_custom_field_values_52" class="enumeration_cf">
                        <option value="">&nbsp;</option>
                        <option selected="selected" value="156">--- 未選択/not entered ---</option>
                        <option value="59">１Ａ．ＢＩ</option>
                        <option value="60">１Ｂ．ＢＤ</option>
                        <option value="61">１Ｃ．ＤＤ</option>
                        <option value="62">１Ｄ．ＰＤ</option>
                        <option value="63">１Ｅ．Ｃ</option>
                    </select>
                </p>

                <p style="display: block;">
                    <label for="issue_custom_field_values_55"><span title="Reason" class="field-description">Reason of Leakage (Design)</span></label>
                    <select name="issue[custom_field_values][55]" id="issue_custom_field_values_55" class="enumeration_cf">
                        <option value="">&nbsp;</option>
                        <option selected="selected" value="157">--- 未選択/not entered ---</option>
                        <option value="79">Poor Quality</option>
                        <option value="80">Not Reviewed</option>
                        <option value="81">Review Point Leak</option>
                        <option value="82">Review, Correction &amp; Confirmation</option>
                        <option value="83">Lack of Communication</option>
                        <option value="84">Other</option>
                        <option value="85">Not Applicable</option>
                    </select>
                </p>


                <p style="display: block;">
                    <label for="issue_custom_field_values_56"><span title="Test Process" class="field-description">Test Process that Extract Bug</span></label>
                    <select name="issue[custom_field_values][56]" id="issue_custom_field_values_56" class="enumeration_cf">
                        <option value="">&nbsp;</option>
                        <option selected="selected" value="158">--- 未選択/not entered ---</option>
                        <option value="86">ＵＴ</option>
                        <option value="87">ＳＩ1</option>
                        <option value="88">ＳＩ2</option>
                        <option value="89">ＰＴ</option>
                        <option value="90">ＲＴ</option>
                    </select>
                </p>
        </div>
        <input type="submit" name="commit" value="Create">
    </form>
    </body>
    </html>

Answer №2

After reviewing your java-script, I have identified some areas where changes are needed as outlined below -

$(function () {
            $('#issue-form input[type="submit"]').click(function () {
                var TrackID = $('#issue_status_id').val();
                var IssueCF = $('#issue_custom_field_values_55').val();
                var isAlert = 0;
                if (TrackID == '3' && IssueCF == '157') {
                    isAlert = 1;
                    $("#issue_custom_field_values_55").css("border", "2px solid red");
                }

                TrackID = $('#issue_status_id').val();
                IssueCF = $('#issue_custom_field_values_52').val();

                if (TrackID == '3' && IssueCF == '156') {
                    isAlert = 1;
                    $("#issue_custom_field_values_52").css("border", "2px solid red");

                }

                TrackID = $('#issue_status_id').val();
                IssueCF = $('#issue_custom_field_values_56').val();

                if (TrackID == '3' && IssueCF == '158') {
                    isAlert = 1;
                    $("#issue_custom_field_values_56").css("border", "2px solid red");
                }
                if (isAlert == "1") {
                    alert("Please select an option!");
                    return false;
                }
            });
        });
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="issue-form">
        <div class="splitcontent">
            <p>
                <select name="issue[status_id]" id="issue_status_id">
                    <option value="1">New</option>
                    <option value="2">In Progress</option>
                    <option selected="selected" value="3">Solved</option>
                    <option value="4">Feedback</option>
                    <option value="5">End</option>
                    <option value="6">Rejected</option>
                </select>

               <!-- More HTML code here -->
             </form>
    </body>
    </html>

Answer №3

Here is the code snippet for handling a specific case scenario. Feel free to use it and don't forget to show your support by liking my profile if it proves to be helpful.

<script type="text/javascript>
        $(function () {
            $('#issue-form input[type="submit"]').click(function () {
                var TrackID = $('#issue_status_id').val();
                var IssueCF = $('#issue_custom_field_values_55').val();
                var isAlert = 0;
                if (TrackID == '3' && IssueCF == '157') {
                    isAlert = 1;
                    $("#issue_custom_field_values_55").css("border", "2px solid red");
                } else {
                    $("#issue_custom_field_values_55").css("border", "none");
                }

                // Repeat similar block of code for other custom fields

                if (isAlert == "1") {
                    alert("Please select an option!");
                    return false;
                }
            });
        });

    </script>

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

Error encountered in React Native packager due to naming conflict between "lodash" and "yeoman-generator" libraries

Issue Description Within my current project, I am utilizing "react-native": "0.36.0" along with the following dependencies: "lodash": "^4.15.0" "yeoman-generator": "^0.24.1" Upon using versions above "^3.10.1" for "lodash" and "0.21.2" for "yeoman-gene ...

javascriptnpmreact-nativejestjsreact-native-cli

What is the best way to align a logo in a log-in screen?

I am having an issue with centering the logo on my login form. The "signin" text is centered perfectly, but the logo always stays at the top left corner. I don't understand why the logo is not centered. If anyone has a solution to propose, I would gre ...

css

Unable to retrieve data from the array

I am encountering an issue while trying to fetch data from an array, as I keep receiving undefined Please refer to the image for a visual representation of my problem. I'm not sure what I might be overlooking, so any help would be greatly appreciate ...

javascripttypescript

An ELIFECYCLE error was encountered during the production deployment process, resulting in error number

I am currently struggling with a perplexing issue and urgently need to resolve it, so any guidance would be greatly appreciated. My project is built using Laravel and Vue, with Docker managing the image container. The application is deployed on AWS. The ...

javascriptnode.jslaravelvue.jswebpack

Unit testing for changes in AngularJS $scope variables within the .then() function

I'm currently facing an issue with unit testing a function in my controller. The problem lies in making a $scope variable testable. I am assigning the variable within the .then() block of my controller and need to ensure it is set correctly when the . ...

javascriptangularjsunit-testingkarma-jasmineangular-promise

What is the best method to transfer text entered in one textarea to the output of another?

I recently picked up JavaScript again and encountered an issue while developing an app. I am struggling to pass input from one textarea to another, where the text should be converted to uppercase. I attempted to tweak code from w3, but I prefer to achieve ...

javascripthtml

Waiting for a function to finish within a nested function in JavaScript

I'm facing a simple issue that I'm struggling to solve. I have two functions and an object in JavaScript (Node.js) structured like this: var auxmap = new Map(); function one() { for(var i...) { //initialize the map and do something tw ...

javascriptnode.js

What are the benefits of using React.useMemo or React.useCallback within component props?

Exploring efficient ways to implement TailwindCSS in React, considering its utility-first nature leading to component-heavy code (e.g. className="w-full bg-red-500"). One approach is creating a utility function like: utils/tailwind.ts const tw = (...clas ...

javascriptreactjsmemoizationreact-usememoreact-usecallback

Can asynchronous programming lead to memory leakage?

I'm wondering about the potential for memory leaks in asynchronous operations, specifically within Javascript used on both frontend and backend (node.js). When the execute operation is initiated, a delegate named IResponder is instantiated. This dele ...

javascriptnode.jsmemory-leaks

Issue with React occurring when attempting to delete an input component

I seem to be facing a challenge that I can't quite figure out whether it's related to React or not. To help illustrate the issue, I've created a simple example outside of my project: https://codepen.io/as3script/pen/VMbNdz?editors=1111 Wit ...

javascriptreactjs

I am experiencing issues with my HTML select list not functioning properly when utilizing a POST service

When using Angularjs to automatically populate a list with *ngFor and then implementing a POST service, the list stops functioning properly and only displays the default option. <select id="descripSel" (change)="selectDescrip()" > <option >S ...

htmlangulartypescript

Sort an array using another array as the reference in JavaScript

I have encountered similar questions before, but my current challenge involves partially sorting an array based on values from another array. This is what I aim to achieve: let array = [ { name: "Foo", values: [a, b, c, d] }, { name: " ...

javascriptarrays

Generate a string that will be utilized to interpret a JSON response

I can't seem to extract a specific element from a json using a dedicated function. Can someone please assist me with this issue? Here is the fiddle that I have created for reference: http://jsfiddle.net/jonigiuro/N5TTM/2/ CODE: var data = { "res ...

javascriptjqueryjson

Export information from variables, lists, and dictionaries to a csv file

I am in the process of generating a csv file containing user information. So far, I have successfully created a csv file for variables like "name," "surname," and age. However, I also have data stored in lists and dictionaries with unknown lengths that I d ...

javascriptnode.jsjsonexpress

Patience is key when it comes to waiting for a function to finish before moving on to the next step

I'm delving into the world of node js and currently immersing myself in the concepts of promises and async/await. Here's a code snippet I've been experimenting with, but I can't quite figure out how to ensure that the code waits until t ...

javascriptnode.jsasync-await

How can you reference the immediate selector object using jQuery?

I'm currently delving into the realm of jQuery and decided to create a test page equipped with the following code: <a id='encode' href='javascript: void(0)'>encode</a> | <a id='decode' href='javascr ...

javascriptjquery

Maintain authentication state in React using express-session

Struggling to maintain API login session in my React e-commerce app. Initially logged in successfully, but facing a challenge upon page refresh as the state resets and I appear as not logged in on the client-side. However, attempting to log in again trigge ...

javascriptreactjsexpresssessionredux

Setting the overlay video to match the input video size in FFMPEG

Currently, I am incorporating FFMPEG wasm into a NextJS project. However, I believe that general FFMPEG solutions will suffice since FFMPEG wasm is capable of interpreting standard FFMPEG commands. My objective is to superimpose an overlay video onto the ...

javascriptreactjsffmpegnext.jsffmpeg-wasm

Generate a dot density map with the help of Google Maps

I am looking to create a dot density map using Google Maps for my state. I have all the counties outlined with their respective populations, and I want to scatter dots randomly within each county to represent the population. The goal is to make a dot densi ...

javascriptjsongoogle-mapsgoogle-maps-api-3dictionary

Enhance Your Website with Jquery and Bootstrap 4: Imrpessive Navbar Effects for Resizing

Hello, I am facing a challenge that my novice mind is struggling to overcome. Utilizing Bootstrap 4 navbar and some jquery, I managed to create a transition where an initially invisible navbar transforms into a solid color when the user scrolls beyond a ce ...

jqueryhtmlcssangulartwitter-bootstrap