asked on

Attribute 'oninput' is not a valid attribute of element 'input'

Hello,

oninput is not being recognized. creating this page within VS2008.
I am seeing the following error.
Attribute 'oninput' is not a valid attribute of element 'input'
What should be done to get it to recognize this?

Here is my code:

<!DOCTYPE html>
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >-->
<html>

<head>
    <!--<meta charset="utf-8" />-->
    <title>Services</title>
   <link href="jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="jquery-ui.js" type="text/javascript"></script>
    <link href="Stylesheet1.css" rel="stylesheet" type="text/css" />
    <script src="jquery-ui.min.js" type="text/javascript"></script>
    
<script type="text/javascript">

    $(function() {
        $("#svcStartdatepicker").datepicker();
        $("#svcEndDatePicker").datepicker();
    });
    
</script>
   
</head>
<body>

<div>
    <table>
    <tr>
    <td>
    <span > Select Client :</span>
    </td>
    <td>
         <input id="hHoldAutoFill" oninput="GetClientAutoFill(this.value);" class="ui-autocomplete" />
   
    </td>
    </tr>
    <tr>

Open in new window

leakim971

What about :

    $(function() {
        $("#svcStartdatepicker").datepicker();
        $("#svcEndDatePicker").datepicker();
        $("#hHoldAutoFill").on("input", function() {
                GetClientAutoFill( $(this).val() );
        });
    });

Open in new window

With :

<input id="hHoldAutoFill" class="ui-autocomplete" />

Open in new window

Sam Jacobs

if you're attempting to execute GetClientAutoFill() when the user enters the field, use onfocus="GetClientAutoFill(this.value);".
If you're trying to execute it as soon as the form loads, then it should be onload="GetClientAutoFill(this.value);" and should be on the <body> tag.

Julian Hansen

Here is my code - works fine

<!DOCTYPE html>
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >-->
<html>

<head>
    <!--<meta charset="utf-8" />-->
<title>Services</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    
<script type="text/javascript">
$(function() {
  $("#svcStartdatepicker").datepicker();
  $("#svcEndDatePicker").datepicker();
});

function GetClientAutoFill(value)
{
  alert(value);
}
</script>
   
</head>
<body>
  <div>
    <table>
      <tr>
        <td>
          <span > Select Client :</span>
        </td>
        <td>
          <input id="hHoldAutoFill" oninput="GetClientAutoFill(this.value);" class="ui-autocomplete" />
        </td>
      </tr>
    </table>
  </div>
</body>
</html>

Open in new window

Some pointers
1. Consider why you are using oninput - would onchange not be better
2. Look at Leakim's example - consider using an event handler rather than oninput - puts all your code in one place so you can better see what is happening - makes your markup less cluttered
3. You are using tables for layout - you should consider moving away from that paradigm
4. You seem to be including the jquery-ui JavaScript library more than once - don't do that - it will make your page load slower.

Other than that - if your code is not working you need to give us more information about where you are running it (browser / version) - my code above works - you can test it here

shahjagat

ASKER

Julian,

I would try leakim's solution and will try other suggestions.

About my project:
I am creating some WebApi's in VS2017 and they will be consumed in VS2008 application. I tested the consuming of webapi in VS2017 and then copied the same code to VS2008.
This input control is used for implementing autocomplete feature. It will pull clients that have the names starting with the letters input by the user. I am under the opinion that 'onchange' will not fire till the control loses the focus. This is the reason for trying 'oninput'.

The solution given by leakim will definitely help me. But i still want to know the reason for this message coming up in VS2008 and not in VS2017.

<input id="hHoldAutoFill" oninput="GetClientAutoFill(this.value);" class="ui-autocomplete" />

oninput does not have a issue in VS2017 but gives ---- "Attribute 'oninput' is not a valid attribute of element 'input' " -- message in VS2008.

Am i missing any references or any such thing?

Thanks in Advance

Julian Hansen

no - there are no reference issues - oninput has nothing to do with VS or server side code - it is client side javascript.

Why it is not working - you would need to show us more than you have - as I have demonstrated the code is fine - my version works perfectly so there is something specific to your code that is not right.

Do you have a link or a fidddle that demonstrates the problem?

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

shahjagat

ASKER

leakim971,

I installed it but no difference.
It is not preventing my code from executing.
Just shows that message.

Thanks

leakim971

did you enabled it ?

shahjagat

ASKER

leakim971,

Thanks that worked. Will update your answer as solution.

Julian,

Regarding lay out - "You are using tables for layout - you should consider moving away from that paradigm"

Can you provide links to articles examples for alternatives, i would take a look at it.

Thanks

Julian Hansen

Look at any modern site you will see that tables are not being used to layout a page - for good reason.

There are many frameworks out there (for example Bootstrap) that give you the foundations for creating responsive websites based on various layout strategies. Common strategies in clude

a) Floated div's using columns (http://getbootstrap.com/docs/4.1/layout/overview/)
b) Flexbox(also uses div's but with flexbox styles)
b) Grid