Develop Reference

Javascript field.setCustomValidity() doesn't set field to valid

I have an HTML form and using Javascript to validate the form. However, when I use setCustomValidity(), it doesn't seem to work properly. I have to click on the submit button twice to mark the field as invalid, and then when the correct input is entered, the field is not marked as valid again, i.e. the error message keeps repeating.
Here's my HTML:
<form id="data_form" onsubmit="event.preventDefault(); return validateForm();">
<table>
<tr>
<td colspan="2" class="right_align">
<label for="supplier_ref"> Supplier Reference Number: </label>
</td>
<td colspan="2">
<input id="supplier_ref" name="supplier_ref" type="number" required>
</td>
</tr>
<!-- more rows -->
<button id="generate" name="generate" type="submit" onclick=""> Generate Barcode </button>
</table>
</form>
Javascript:
function validateForm() {
var form = document.forms["data_form"];
var emptymsg = "Field must be filled out.";
var supplier_ref = form.elements["supplier_ref"];
var supplier_ref_value = supplier_ref.value.toString();
if (supplier_ref_value == "") {
supplier_ref.setCustomValidity(emptymsg);
return false;
}
if (supplier_ref_value.length != 9){
supplier_ref.setCustomValidity("Number has to be 9 digits long.");
return false;
} else {
supplier_ref.setCustomValidity("");
}
return true;
}
When the length of the Supplier Reference is less than 9 digits, the error message appears, but when I enter the correct length, I still get the same error.
I would appreciate any help.
Thanks in advance

Nvm it only works with addEventListener

Validating input field contained in table row

<tr>
<td>.....</td>
<td>
<div class="...">
<div class="..." id="..." style="display:block;">
<ul id="..." class="..." style="position:relative;">
<%
for(int i = 0;i < len;i++)
{
//get a json object
if(jsonobj != null)
{
//Get style...id..and some other values....
%>
<li class="..." style="display:block;" id="...">
<div style="<%=style%>">
<input type="checkbox" id="<%=Id%>" class="..." value="true" <%if(enabled){%> checked="checked" <%}%> onClick="..."/>
<input id="inp_<%=Id%>" type="text" class="..." style="border:none;padding-left:5px;" value="<%=text%>" title="<%=title%>">
</div>
</li>
<% }
}
%>
</ul>
</div>
</div>
</td>
</tr>
I have a table row like the above code. As you can see, there are two inputs, a checkbox and a text field. While submiting the form I want to validate the text field and show an error message with a small error icon at the right side. But since the input is in a table row I'm unable to to this.
I have a function which shows a tool tip. I just have to pass the id of the element and the message to that function. I want to validate the input field, show a small error image and call the tool tip function so that the tool tip is shown on the error image.
I want the error image to appear next to the required input field i.e., if the 3rd input field is vaidated to false, then the error should be displayed next to the 3rd containing the input field.
How do I do it?

It's a simple task for jQuery. See the example below:
$(document).ready(function(){
$("#btnSave").click(function(){
$(".txtvalidatorMessage").remove() // remove all messages
var inputs = $(".txtvalidator");
function ShowMessage(message, input){
var messageContainer = $("<div class='txtvalidatorMessage'>"+message+"</div>");
messageContainer.insertAfter(input)// show the message beside the input
}
inputs.each(function(){
var validationType = $(this).attr("validationType");
var require = eval($(this).attr("require"));
switch(validationType)
{
case "NotEmpty":
if ($(this).val() == "" && require == true)
ShowMessage("cant be empty",$(this))
break;
case "Number":
var isnum = /^\d+$/.test($(this).val());
if (!isnum && require == true)
ShowMessage("only number",$(this))
break;
}
});
});
});
.txtvalidatorMessage{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type='text' value="" placeholder='Cant be empty' class='txtvalidator' validationType='NotEmpty' require='true' />
</td>
</tr>
<tr>
<td>
<input type='text' value="" placeholder='only Number' class='txtvalidator' validationType='Number' require='true' />
</td>
<tr>
<td>
<input type='button' value="Validate" id='btnSave' />
</td>
</tr>
</table>

Get text from text box and display it in a paragraph

If we have a table which contains name, surname and a button(Submit)
for example :
<html>
<body>
<table>
<tr>
<td>
<label>First name: </label>
</td>
<td>
<input type="text" id="name" name="firstname" required />
</td>
<td>
<label>Last name: </label>
</td>
<td>
<input type="text" id="lastname" name="lastname" required />
</td>
<td>
<button type="submit" onclick="funct()">Submit</button>
</td>
</tr>
</table>
<p id="mane1"> </p>
</body>
</html>
and when we click submit we want do display the text that we get from text boxes in a new paragraph:
Your name is : RandomName
Your surname is : RandomSurname
How can we do this?
I tried this :
function funct(){
var name=document.getElementById("name").value;
if (name!=""){
document.getElementById("name1").innerHTML="Your Name Is:"+ name;
}
}
The problem is that if I click "Submit" it doesn't show anything.
I tried to find something useful over the internet , but all the examples that I used didn't do anything.
I will appreciate any help :)

After changing the p id to "name1", the code you posted works fine. Are you sure the problem isn't somewhere else in your code?
I noticed that your button is a submit type. Is it in a form? If it is, then your browser might be submitting the form and reloading the page so fast you don't see the javascript actually working. You can change the button type to "button" to prevent the form from submitting.

Is the "name1" vs. "mane1" a typo? If that is a typo, and in the code you have it right, then try using .innerText or putting html tags in your .innerHtml string.
function funct(){
var name=document.getElementById("name").value;
if (name!=""){
// document.getElementById("name1").innerHTML="Your Name Is:"+ name;
document.getElementById("mane1").innerHTML="<p>Your Name Is:"+ name + "</p>";
}
}
EDIT: Further consideration
Is your script
function funct(){
var name=document.getElementById("name").value;
if (name!=""){
document.getElementById("mane1").innerHTML="<p>Your Name Is:"+ name + "</p>";
}
}
After your call to the script. Going from top to bottom on the page?
<button type="submit" onclick="funct()">Submit</button>
If not, then it may be an issue with the dom not knowing what funct() is yet. In other words, make sure your script is at the bottom, or activated by something higher on the page content than where you are trying to use it.

C#.net - How can I show a dynamically generated textarea on button click using JavaScript?

I want to show a text area based on a button click. Pretty simple, but the textarea and button are dynamically generated using Knockout js. My current code works, except it only expands the first text area. There are several projects displayed.
HTML (the button and textarea are the last two controls):
<!-- ko foreach: projects -->
<div id="eachOppyProject" style="border-bottom: 1px solid #eee;">
<table>
<tbody>
<tr>
<td><a data-bind="attr: { href: '/tools/oppy/' + guid }" style="font-size: 25px;"><span class="link" data-bind=" value: guid, text: name"></span></a></td>
</tr>
<tr data-bind="text: projectDescription"></tr>
<tr data-bind="text: guid"></tr>
</tbody>
</table>
<span class="forminputtitle">Have you done project this before?</span>
<input type="button" id="oppyBtn" class="btnOppy" onclick="displayTextArea()" value="Yes" />
<textarea id="oppyDoneTextArea" placeholder="Tell us a little of what you've done." style=" display:none; height:75px; " /><br />
</div>
<!-- /ko -->
JavaScript:
function displayTextArea() {
var my_disply = document.getElementById('oppyDoneTextArea').style.display;
if (my_disply == "block")
document.getElementById('oppyDoneTextArea').style.display = "none";
else
document.getElementById('oppyDoneTextArea').style.display = "block";
}
As you can see, the controls are dynamically generated based on the objects that Knockout binds. So, using ID's is a bad idea because it would generate duplicate IDs. That is currently my problem now -- this code works for the first text area but doesn't work for the rest of the projects that display.

It is because your button is of type=submitand is causing a postback, change:
<input type="submit" id="oppyBtn" class="btnOppy" onclick="displayTextArea()" value="Yes" />
to
<input type="button" id="oppyBtn" class="btnOppy" onclick="displayTextArea()" value="Yes" />

how to stop the redirection of login lightbox, if username password is wrong?

lightbox
<div class="modalBody">
<form method="post" action="login.php">
<table>
<tr>
<td>User Name*</td>
<td>
<input name="fname" type="text" class="input" value="" /></td> </tr>
<tr> <td>Password</td>
<td>
<input name="password" type="password" class="input" /> </td> </tr>
<td>Not registered yet, Click here</td>
</tr>
<tr height="25"> <td colspan="2" align="center">
<input type="image" name="BtnSubmit" id="BtnSubmit" src="images/login-button.png" alt="Submit" onClick="javascript:return onSub();" style="border-width:0px;" /></a></td> </tr>
<span style="color:#FF0000" >
<?php if(isset($_REQUEST['msg']) && $_REQUEST['msg'] == 'wrong')
echo ' Please Enter Username & Password!!!!!!';
elseif(isset($_REQUEST['msg']) && $_REQUEST['msg'] == 'incorect1')
echo ' Username Or Password Is Incorrect!!!!!';
?> </span></table>
</form> </div>
javascript:
<script language="javascript" type="text/javascript">
function revealModal(divID)
{
window.onscroll = function () { document.getElementById(divID).style.top = document.body.scrollTop; };
document.getElementById(divID).style.display = "block";
document.getElementById(divID).style.top = document.body.scrollTop;
}
function hideModal(divID)
{
document.getElementById(divID).style.display = "none";
}
</script>
The thing is that if i m submitting with wrong user name & password, the page is redirecting to the header location page only changing the header location like this & the lightbox got disappeared
header('Location:'.$_SERVER['HTTP_REFERER']."?msg=wrong");
But i dont want to redirect to any page after submission if there is wrong user name or password or the fields are blank, i want to stay in that modal box with the error msg.. Any help ?? Thanks ..

First of all; you cannot change headers once HTML has been printed out. So for you to be able to set the header, you must first redirect to a new page - or reload it entirely.
However; it sounds to me like you're in need of AJAX.
When the user submits the form, a call to an AJAX function is made - which in turn, talks with another PHP file, handling the verification for the login.
If the login was successful, you will want to start the session for the user and reload the page using Javascript's: window.location.href. If the login was unsuccessful, you will want to manipulate the HTML of a given "error element" so to speak -- Or simply show an element as simple as:
<div class='formError'>Wrong Username/Password combination