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

What could be the reason for the token being undefined on the client side?

I have built an ecommerce site using nextjs and mongoose, integrating a jwt token in a cookie for client-side authentication. However, when trying to retrieve the token from the cookie named OursiteJWT, I encountered issues with it being undefined: Despit ...

javascriptnode.jsmongoosenext.jsjwt

Creating a rhombus or parallelogram on a canvas can be easily achieved by following these simple

I'm new to working with the canvas element and I want to create some shapes on it. Can someone provide me with guidance on how to draw a Rhombus or Parallelogram on a canvas? Something similar to what is shown in this image: https://i.stack.imgur.c ...

javascripthtmlcanvas

Display a division in C# MVC 4 when a boolean value is true by using @Html.DropDownList

I have multiple divs stacked on top of each other, and I want another div to appear when a certain value is selected. I'm familiar with using JavaScript for this task, but how can I achieve it using Razor? Below is a snippet of my code: <div id=" ...

c#javascriptcssasp.net-mvcrazor

Refreshing a web page in Internet Explorer can cause the HTTP Header content to be altered

As I monitor my dashboard retrieving continuous data from an SAP server, I stumbled upon a solution to fetch the current server date. This approach allows me to display when the dashboard was last updated, and this date is displayed in the DOM. //Method f ...

javascripthtmljsonxmlhttprequesthttp-headers

Ways to attach an item using its lower point instead of its upper coordinate

I am currently working on a poker table project using React. As of now, I have player components that need to be strategically positioned around the table. One challenge I'm facing is that when the screen attribute changes, the position of the top tw ...

javascripthtmlcssreactjs

Sharing AngularJs controllers between different modules can help streamline your

I'm facing an issue with trying to access an array from one controller in another controller. Despite simplifying the code for clarity, I still can't seem to make it work. Here is my first controller: app.controller('mycont1', [' ...

javascriptangularjsmodel-view-controller

Align pictures in the middle of two divisions within a segment

This is the current code: HTML: <section class="sponsorSection"> <div class="sponsorImageRow"> <div class="sponsorImageColumn"> <img src="img/kvadrat_logo.png" class="sponsorpicture1"/> </div& ...

javascripthtmlcss

Prevent HTML from being escaped in data-binding while utilizing repeat-templates in Polymer

Hey there! <template repeat="{{item in items}}"> <div layout horizontal> <div>{{item['content']}}</div> <div>{{item['more_content'])}</div> ...

htmldata-bindingdartpolymer

Unable to preventDefault() function from working within .then method

Snippet: angular .module('mean-starter') .run(run) ; function run($rootScope, Auth, $state) { function stopStateChange (message, event, redirect) { console.log(event); event.preventDefault(); alert(message); if (redirect) ...

javascriptangularjseventsangular-ui-routerangular-promise

Trouble with CSS styling in Asp.Net MVC dropdown list

I have encountered an issue while trying to apply a CSS class to an ASP.NET MVC dropdown list. The CSS class works fine for the EditorFor case, but not for the DropDownListFor case. I am wondering what could be missing from my code? Here is the working CS ...

cssasp.netasp.net-mvc

Is there a way to use SCTP with Socket.io and Node.js?

I have a new project in the works, creating a web application that will utilize web sockets to provide real-time updates for users. The plan is to seamlessly transmit changes from the back-end engine. My challenge lies in Node.js not supporting SCTP sock ...

javascriptnode.jssocket.iosctp

Transmit data using both jQuery and JSON technology

I'm struggling to figure out how to send a JSON structure with a file using AJAX. Whenever I try to include an image in the structure, I encounter an error. var professionalCardNumber = $("#professional_card_number_input").val(); var professi ...

jqueryajaxjsonnode.jsmongodb

Employing fetch to send a POST request for inserting data into a JSON server database

I'm currently experimenting with adding new data to my simulated database using JSON server. However, I've encountered an issue where the input information is not being added when I execute the function. Although an ID is generated in my databas ...

javascriptreactjsfetchjson-server

How can I prevent a hyperlinked element from being clicked again after it has been clicked using JavaScript or jQuery in PHP

I am struggling with disabling the href after it has been clicked. Can someone please assist me with this? It is crucial for me to complete this PHP program. Style.css .disabled { pointer-events: none; } ...

javascriptjquery

Local error when attempting to export a node module

As a novice in node.js, I'm looking to parse an XML file into JSON. To achieve this, I decided to use the bluebutton library available at https://github.com/blue-button/bluebutton.js. After installing the module using npm install bluebutton, a node_m ...

javascriptnode.js

Functionality of jQuery Mobile Page

$(document).on("pageshow", "#mappage", function (event) { $("#doldur").append("<li> <label onclick='getBina(" + featuressokak[f].attributes.SOKAKID + ");'>" ...

javascriptjquerymobile

Redux - The same reducers, containers, and components are yielding varying outcomes

update: Issue resolved by connecting a different variable to the mapStateToProps. I'm encountering some challenges with my react-redux application and I'm struggling to pinpoint the error in my setup. You can access the source code here. The f ...

javascriptreactjsreduxreact-redux

Node.js is struggling to parse JSON data, resulting in undefined values appearing in the console

Issue with parsing JSON data in a node.js environment resulting in 'undefined' display in console. Below is the HTML code snippet: var jsonObjects = [{id:1, name:"amit"}]; jQuery.ajax({ url: 'http://localhost:8081', type: ...

jsonnode.jsjqueryhttp-headers

Mastering the art of iterating through arrays using node.js request()

After transitioning from passing single values to multiple values in my node API, I encountered an issue where the API no longer responded. Here is an example of single values for fields: tracking: "123", // Only one tracking number carrier: "usps" // On ...

javascriptnode.jsarraysexpress

When a block is clicked, jQuery will reveal that block while hiding the others sequentially, starting with the second block, then the third, and finally the fourth

Creating a navigation menu with 4 blocks can be a bit tricky, especially when trying to show one block at a time upon click. Here is my code attempt, but unfortunately it's not working as expected. I would greatly appreciate any help or suggestions on ...

javascriptjqueryhtmlcss