在没有和其他服务器端代码的情况下验证HTML5字段输入

Been fiddling around with jQuery and HTML5, but I am stuck on a simple simple action. JSFiddle here: http://tinyurl.com/oqmkyhr

一直在使用jQuery和HTML5,但我仍然坚持一个简单的简单操作。 JSFiddle:http://tinyurl.com/oqmkyhr

I have a field input where I input a number, and when I press a button, the inputted number is rounded to 2 decimal places. The catch is, you cannot use or server side code AND it is all within 1 html document.

我有一个字段输入,我输入一个数字,当我按下一个按钮时,输入的数字四舍五入到小数点后两位。问题是,您不能使用或服务器端代码,它都在1 html文档中。

This is what I have:

这就是我所拥有的:

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scotiabank Currency Converter</title>
  <meta name="description" content="Converts currencies with Yahoo! Finance API">
  <meta name="author" content="Kangze Huang">
  <link rel="stylesheet" href="#">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>
<input type='number' id='Amount' value='Amount convert' step='0.01'>
<input type='button' id='Validate' value='Check decimals'>
<h1></h1>

<script>
jQuery(document).ready(function($) {
$('#validate').click(function(){
        $('Amount').value = parseFloat(value).toFixed(2);
        $('h2').text(value);
    });
});
</script>
</body>

When I press the Validate button, it turns into NaN (On Chrome & other web-browsers)! On JSFiddle it does nothing. What am I doing wrong? Perhaps syntax or something I'm missing?

当我按下验证按钮时,它会变成NaN(在Chrome和其他网络浏览器上)!在JSFiddle上它什么也没做。我究竟做错了什么?也许语法或我缺少的东西?

5 个解决方案

#1

It is because you have $('Amount').value. You are missing the '#' and the parenthesis and referencing the value wrong. But you have the right idea. What you can try is:

这是因为你有$('金额')。值。您缺少'#'和括号,并且引用了错误的值。但你有正确的想法。你可以尝试的是:

$('#validate').click(function(){
    var amount = $('#Amount').value();
        $('h1').text(parseFloat(value).toFixed(2));
    });
});

#2

Your selector should be $("#Amount"). You are missing the #.

你的选择器应该是$(“#Amount”)。你错过了#。

Also, if you are trying to ASSIGN the value, you should be using:

此外,如果您尝试分配值,您应该使用:

$("#Amount").val( parseFloat(value).toFixed(2) );

I am not sure where you are getting your 'value' variable from, I don't see it getting assigned anywhere.

我不确定你从哪里得到你的'价值'变量,我不认为它被分配到任何地方。

#3

i see many syntax and other mistakes in your code, use the below code:

我在您的代码中看到许多语法和其他错误,请使用以下代码:

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scotiabank Currency Converter</title>
  <meta name="description" content="Converts currencies with Yahoo! Finance API">
  <meta name="author" content="Kangze Huang">
  <link rel="stylesheet" href="#">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>
<input type='number' id='Amount' value='Amount convert' step='0.01'>
<input type='button' id='Validate' value='Check decimals'>
<h1></h1>

<script>
jQuery(document).ready(function($) {
$('#validate').click(function(){
        $('#Amount').val(parseFloat(value).toFixed(2)); //you missed # in this, normally in jquery we use .val() method to set the value of the input types
        $('h1').html(parseFloat(value).toFixed(2)); // in the above code you have used h1 so here also use h1
    });
});
</script>
</body>

#4

$('#validate').click(function(){
   1^
    $('Amount').value = parseFloat(value).toFixed(2);
      2^       3^                 4^
    $('h2').text(value);
      5^

validate is not Validate

验证不是验证

Amount will match <Amount> elements which don't exist. ID selectors begin with a #

金额将匹配不存在的 <金额> 元素。 ID选择器以#开头

jQuery objects don't have value properties. DOM nodes (if they are form controls) do. You are probably looking for val()

jQuery对象没有值属性。 DOM节点(如果它们是表单控件)可以。你可能正在寻找val()

value is an undefined variable. You need to define it before you use it. You probably want $('Amount').val() instead of using value at all.

value是一个未定义的变量。您需要在使用它之前定义它。你可能想要$('Amount')。val()而不是使用value。

You have no elements that match this selector, and heading elements should be used for headings.

您没有与此选择器匹配的元素,标题元素应该用于标题。

So what you are probably looking for is:

所以你可能正在寻找的是:

$('#Validate').click(function() {
  var value = $('#Amount').val();
  value = parseFloat(value).toFixed(2);
  console.log(value);
  $('output').val(value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='number' id='Amount' value='Amount convert' step='0.01'>
<input type='button' id='Validate' value='Check decimals'>
<output></output>

#5

If you want to select something by id in jquery, you need to use a # sign. In your case $('#Amount'); Also, there are no h2 elements on your page, so $('h2').text(value); won't do anything. Additionally, if you want to get the value of an input in jquery, you use the .val() functions, and not .value.

如果你想在jquery中通过id选择一些东西,你需要使用#符号。在你的情况下$('#Amount');此外,页面上没有h2元素,因此$('h2')。text(value);不会做任何事情。另外,如果要在jquery中获取输入的值,则使用.val()函数,而不是.value。

Fixed fiddle: http://jsfiddle.net/9kqbue5t/2/

固定小提琴:http://jsfiddle.net/9kqbue5t/2/

#1