ID needs to be unique for each item on the page. Just like the ID of a row in a database.
>Hi everybody,
>
>Do you know if validations are attached based on the name or id of the element?
>
>After I re-factored my Client class the validations don't fire anymore. The textbox gets the red border, but the message text is no longer shown. I am thinking it may be because I now have multiple elements on the page with the exact same id. Here is what I see when I view the source:
>
>
><!DOCTYPE html>
><html lang="en">
><head>
> <meta charset="utf-8" />
> <title>Client</title>
> <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
> <meta name="viewport" content="width=device-width" />
>
> <link href="/content/Site.css" rel="stylesheet" type="text/css"></link>
><link href="/content/Site_Cur.css" rel="stylesheet" type="text/css"></link>
><link href="/content/themes/base/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css"></link>
><link href="/content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
><link href="/content/themes/base/jquery.ui.accordion.css" rel="stylesheet" type="text/css"></link>
><link href="/content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css"></link>
><link href="/content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet" type="text/css"></link>
><link href="/content/themes/base/jquery.ui.base.css" rel="stylesheet" type="text/css"></link>
><link href="/content/themes/base/jquery.ui.button.css" rel="stylesheet" type="text/css"></link>
><link href="/content/themes/base/jquery.ui.core.css" rel="stylesheet" type="text/css"></link>
><link href="/content/themes/base/jquery.ui.datepicker.css" rel="stylesheet" type="text/css"></link>
><link href="/content/themes/base/jquery.ui.dialog.css" rel="stylesheet" type="text/css"></link>
><link href="/content/themes/base/jquery.ui.progressbar.css" rel="stylesheet" type="text/css"></link>
><link href="/content/themes/base/jquery.ui.resizable.css" rel="stylesheet" type="text/css"></link>
><link href="/content/themes/base/jquery.ui.selectable.css" rel="stylesheet" type="text/css"></link>
><link href="/content/themes/base/jquery.ui.slider.css" rel="stylesheet" type="text/css"></link>
><link href="/content/themes/base/jquery.ui.tabs.css" rel="stylesheet" type="text/css"></link>
><link href="/content/themes/base/jquery.ui.theme.css" rel="stylesheet" type="text/css"></link>
><link href="/content/themes/base/ui.jqgrid.css" rel="stylesheet" type="text/css"></link>
><link href="/content/themes/FlexiGrid/flexigrid.css" rel="stylesheet" type="text/css"></link>
><link href="/content/themes/FlexiGrid/flexigrid.pack.css" rel="stylesheet" type="text/css"></link>
>
> <script src="/scripts/jQuery/grid.locale-en.js" type="text/javascript"></script>
><script src="/scripts/jQuery/jquery-1.7.1.intellisense.js" type="text/javascript"></script>
><script src="/scripts/jQuery/jquery-1.7.1.js" type="text/javascript"></script>
><script src="/scripts/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
><script src="/scripts/jQuery/jquery-ui-1.8.20.js" type="text/javascript"></script>
><script src="/scripts/jQuery/jquery-ui-1.8.20.min.js" type="text/javascript"></script>
><script src="/scripts/jQuery/jquery.jqGrid.min.js" type="text/javascript"></script>
><script src="/scripts/jQuery/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
><script src="/scripts/jQuery/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
><script src="/scripts/jQuery/jquery.validate-vsdoc.js" type="text/javascript"></script>
><script src="/scripts/jQuery/jquery.validate.js" type="text/javascript"></script>
><script src="/scripts/jQuery/jquery.validate.min.js" type="text/javascript"></script>
><script src="/scripts/jQuery/jquery.validate.unobtrusive.js" type="text/javascript"></script>
><script src="/scripts/jQuery/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
><script src="/scripts/Flexigrid/flexigrid.js" type="text/javascript"></script>
><script src="/scripts/Flexigrid/flexigrid.pack.js" type="text/javascript"></script>
><script src="/scripts/CardNumbers.js" type="text/javascript"></script>
><script src="/scripts/Clients.js" type="text/javascript"></script>
><script src="/scripts/jQuery.griffinTable.1.0.5.js" type="text/javascript"></script>
><script src="/scripts/knockout-2.1.0.debug.js" type="text/javascript"></script>
><script src="/scripts/knockout-2.1.0.js" type="text/javascript"></script>
><script src="/scripts/modernizr-2.5.3.js" type="text/javascript"></script>
><script src="/scripts/_references.js" type="text/javascript"></script>
>
>
></head>
><body>
> <header>
> <div class="content-wrapper">
>
> <div class="float-right">
> <section id="login">
> <ul>
>
> <li><a href="/Account/Login" id="loginLink">Log in</a></li>
> </ul>
>
> </section>
> <nav>
> <ul id="menu">
> <li><a href="/ClientOrder" title="Create New Order for Selected Client">New Order</a></li>
> <li><a href="/Client/Client" title="Clients Maintenance">Clients</a></li>
> <li><a href="/Operator" title="Operators Maintenance">Operators</a></li>
> <li><a href="/ClientOrder/History" title="View Clients Orders History">History</a></li>
> <li><a href="/Home/About">About</a></li>
>
> </ul>
> </nav>
> </div>
> </div>
> </header>
> <div id="body">
>
> <section class="content-wrapper main-content clear-fix">
>
>
>
> <form id="frmClientsSearch">
> <label for="clientNo">Client No: </label>
> <input type="number" name="searchClientNo" class="numericOnly" /><br />
> <label for="clientName">Client Name: </label>
> <input type = "text" size =25 value ="Please enter the search value" class="SelectOnEntry"
> name ="searchClientName" />
>
> <input type="button" id="btnClientsSearch" value ="Find / Refresh" />
></form>
><div style="padding-left: 150px; padding-top: 50px; padding-bottom: 50px;" id="ClientsResults">
> <table id="flexClients" style="display: none">
> </table>
></div>
>
><div id="editor" style="visibility: hidden">
><form action="/Client/Client" id="sform" method="post" title="Client Info"><fieldset>
> <legend>Client Info</legend>
>
>
>
> <input type="hidden" id="fntype" name="fntype">
> <input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="Id" name="Id" type="hidden" value="" />
> <div class="editor-label">
> <label for="Number">Client No</label>
></div>
><div class="editor-field">
> <input class="text-box single-line" data-bind="value: Number" data-val="true" data-val-number="The field Client No must be a number." data-val-required="The Client No field is required." id="Number" name="Number" type="text" value="" />
> <span class="field-validation-valid" data-valmsg-for="Number" data-valmsg-replace="true"></span>
></div>
>
>
> <div class="editor-label">
> <label for="Name">Client Name</label>
></div>
><div class="editor-field">
> <input class="text-box single-line" data-bind="value: Name" data-val="true" data-val-required="The Client Name field is required." id="Name" name="Name" type="text" value="" />
> <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
></div>
>
>
> <div class="editor-label">
> <label for="Address">Address</label>
></div>
>
><div class="editor-field">
> <textarea class="text-box multi-line" cols="60" data-bind="value: Address" id="Address" name="Address" rows="5" wrap="virtual">
></textarea>
> <span class="field-validation-valid" data-valmsg-for="Address" data-valmsg-replace="true"></span>
></div>
>
>
> <div id="ContactsInfo">
>
>
> <div id="Contact1">
>
> <div class="editor-label">
> <label for="Contact">Contact Name</label>
></div>
><div class="editor-field">
> <input class="text-box single-line" data-bind="value: Contact" data-val="true" data-val-length="The field Contact Name must be a string with a maximum length of 100." data-val-length-max="100" id="Contact" name="Contact1.Contact" type="text" value="" />
> <span class="field-validation-valid" data-valmsg-for="Contact" data-valmsg-replace="true"></span>
></div>
>
><div class="editor-label">
> <label for="Email">Email</label>
></div>
><div class="editor-field">
> <input class="text-box single-line" data-bind="value: Email" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-length="The field Email must be a string with a maximum length of 100." data-val-length-max="100" id="Email" name="Contact1.Email" type="text" value="" />
> <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
></div>
>
><div id="PhoneInfo">
> <div class="float-left">
> <div class="editor-label">
> <label for="Phone">Phone</label>
></div>
><div class="editor-field">
> <input class="text-box single-line" data-bind="value: Phone" data-val="true" data-val-length="The field Phone must be a string with a maximum length of 10." data-val-length-max="10" id="Phone" name="Contact1.phoneInfo.Phone" type="text" value="" />
> <span class="field-validation-valid" data-valmsg-for="Phone" data-valmsg-replace="true"></span>
></div>
>
> </div>
> <div class="float-right">
> <div class="editor-label">
> <label for="Ext">Ext</label>
></div>
><div class="editor-field">
> <input class="text-box single-line" data-bind="value: Ext" data-val="true" data-val-length="The field Ext must be a string with a maximum length of 5." data-val-length-max="5" id="Ext" name="Contact1.phoneInfo.Ext" type="text" value="" />
> <span class="field-validation-valid" data-valmsg-for="Ext" data-valmsg-replace="true"></span>
></div>
>
> </div>
></div>
>
>
> </div>
>
>
> <div id="Contact2">
>
> <div class="editor-label">
> <label for="Contact">Contact Name</label>
></div>
><div class="editor-field">
> <input class="text-box single-line" data-bind="value: Contact" data-val="true" data-val-length="The field Contact Name must be a string with a maximum length of 100." data-val-length-max="100" id="Contact" name="Contact2.Contact" type="text" value="" />
> <span class="field-validation-valid" data-valmsg-for="Contact" data-valmsg-replace="true"></span>
></div>
>
><div class="editor-label">
> <label for="Email">Email</label>
></div>
><div class="editor-field">
> <input class="text-box single-line" data-bind="value: Email" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-length="The field Email must be a string with a maximum length of 100." data-val-length-max="100" id="Email" name="Contact2.Email" type="text" value="" />
> <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
></div>
>
><div id="PhoneInfo">
> <div class="float-left">
> <div class="editor-label">
> <label for="Phone">Phone</label>
></div>
><div class="editor-field">
> <input class="text-box single-line" data-bind="value: Phone" data-val="true" data-val-length="The field Phone must be a string with a maximum length of 10." data-val-length-max="10" id="Phone" name="Contact2.phoneInfo.Phone" type="text" value="" />
> <span class="field-validation-valid" data-valmsg-for="Phone" data-valmsg-replace="true"></span>
></div>
>
> </div>
> <div class="float-right">
> <div class="editor-label">
> <label for="Ext">Ext</label>
></div>
><div class="editor-field">
> <input class="text-box single-line" data-bind="value: Ext" data-val="true" data-val-length="The field Ext must be a string with a maximum length of 5." data-val-length-max="5" id="Ext" name="Contact2.phoneInfo.Ext" type="text" value="" />
> <span class="field-validation-valid" data-valmsg-for="Ext" data-valmsg-replace="true"></span>
></div>
>
> </div>
></div>
>
> </div>
> </div>
>
> <div id="SaveCancel" class="float-right">
> <button type="Submit" id="btnSave">Save</button>
> <button type="reset" id="btnCancel">Cancel</button>
> </div>
></fieldset>
></form>
></div>
>
> </section>
> </div>
> <footer>
> <div class="content-wrapper">
> <div class="float-left">
> <p>© 2012 - Card Numbers</p>
> </div>
> </div>
> </footer>
>
>
> <script src="/Scripts/Clients.js" type="text/javascript" ></script>
>
></body>
></html>
>
>
>Please, note, that I have two email textboxes with the same Id but different names. Could the reason for validation messages not showing be in the same Id being used?
Craig Berntson
MCSD, Microsoft .Net MVP, Grape City Community Influencer
