HTML поле ввода не принимает хорошо отформатированный десятичный - PullRequest
Новая
       55

HTML поле ввода не принимает хорошо отформатированный десятичный

0 голосов
/ 06 января 2020

У меня проблема с полем ввода HTML. Я создал два поля ввода, в которые пользователь может вводить десятичные числа в формате 00.000 (0). Под полями ввода есть раскрывающаяся форма выбора опции html, из которой пользователь может выбрать предварительно заданные числа ввода.

Сейчас. Моя проблема в том, что:

  1. Я выбираю вариант из выпадающего списка.
  2. Десятичные числа вводятся в форму ввода html, например, 33.748997 и -84.387985 .
  3. Я добавляю буквы / знаки в верхнее поле, например, 33.748997sdjfhjsdf, и нажимаю кнопку отправки (или вместо добавления букв к десятичному числу я могу набирать буквы, знаки, все, что не в десятичном формате) .
  4. Я получаю информацию, что поле не отформатировано должным образом (это нормально до сих пор).

enter image description here

Я выбрал из выпадающего списка другое значение (или то же самое), поля ввода заполняются новыми десятичными числами, и я нажимаю Отправить, но я получаю предупреждение, что число не отформатировано должным образом (как в программе, хотя ввод будет новым: 33.748997sdjfhjsdf) Я заставляю поля ввода правильно читать значение?

index. jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>
<head>
<%@ page isELIgnored="false" %>
<meta charset="UTF-8">
<title>List of 10 closest earthquakes</title>

</head>
<body>

<form action="/read" method="post">
    <label>Value1</label>
    <fieldset>
        <input type="text" name="value1xxx"
            id="value1xxx"
            oninvalid="this.setCustomValidity('Format 00.000')"
            onchange="try{setCustomValidity('')}catch(e){}"
            oninput="setCustomValidity(' ')" pattern="^[-]?(\d+|\d*\.\d+)$"
            required="required" />
    </fieldset>

    <label>Value2</label>
    <fieldset>
        <input type="text" name="value2xxx"
            id="value2xxx"
            oninvalid="this.setCustomValidity('Format: 00.000')"
            onchange="try{setCustomValidity('')}catch(e){}"
            oninput="setCustomValidity(' ')" pattern="^[-]?(\d+|\d*\.\d+)$"
            required="required" />
    </fieldset>

    <fieldset class="form-group">
        <label>Select a value</label> <select
            id="valueSelect">
            <option>None</option>
            <option value="35.084385_-106.650421">Value1</option>
            <option value="33.748997_-84.387985">Value2</option>
            <option value="41.878113_-87.629799">Value3</option>
            <option value="32.776665_-96.796989">Value4</option>
        </select>
    </fieldset>
    <br />
    <button type="submit" class="btn btn-info my-4 btn-block">Submit</button>
</form>

<script src="webjars/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#valueSelect').on('change', function () {
    var val = this.value;
    var parts = val.split("_");
    $('#value1xxx').val(parts[0]);
    $('#value2xxx').val(parts[1]);
});
</script>
</body>
</html>

ReadServlet. java

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/read")
public class ReadServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String value1 = request.getParameter("value1xxx");
        String value2 = request.getParameter("value2xxx");
        System.out.println("Value1: " + value1);
        System.out.println("Value2: " + value2);    
        request.getRequestDispatcher("/index.jsp").forward(request, response);
    }
}

pom. xml

<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.dominikazb</groupId>
<artifactId>001-frontend-question</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>001-frontend-question Maven Webapp</name>
<url>http://maven.apache.org</url>
<dependencies>
    <dependency>
        <groupId>junit</groupId>
        <artifactId>junit</artifactId>
        <version>3.8.1</version>
        <scope>test</scope>
    </dependency>

    <dependency>
        <groupId>junit</groupId>
        <artifactId>junit</artifactId>
        <version>3.8.1</version>
        <scope>test</scope>
    </dependency>

    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <version>3.1.0</version>
        <scope>provided</scope>
    </dependency>

    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jsp-api</artifactId>
        <version>2.0</version>
        <scope>provided</scope>
    </dependency>

    <!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>

    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>bootstrap</artifactId>
        <version>3.3.6</version>
    </dependency>

    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>jquery</artifactId>
        <version>1.9.1</version>
    </dependency>

</dependencies>
<build>
    <finalName>001-frontend-question</finalName>


    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-eclipse-plugin</artifactId>
            <version>2.9</version>
            <configuration>
                <wtpversion>2.0</wtpversion>
                <wtpContextName>todo</wtpContextName>
            </configuration>
        </plugin>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.2</version>
            <configuration>
                <verbose>true</verbose>
                <source>1.8</source>
                <target>1.8</target>
                <showWarnings>true</showWarnings>
            </configuration>
        </plugin>



        <plugin>
            <groupId>org.apache.tomcat.maven</groupId>
            <artifactId>tomcat7-maven-plugin</artifactId>
            <version>2.2</version>
            <configuration>
                <path>/</path>
                <contextReloadable>true</contextReloadable>
            </configuration>
        </plugin>

        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-war-plugin</artifactId>
            <version>2.2</version>
            <configuration>
                <failOnMissingWebXml>false</failOnMissingWebXml>
                <webappDirectory>${project.build.directory}/${project.artifactId}
                </webappDirectory>
                <warName>${project.artifactId}</warName>
            </configuration>
        </plugin>
    </plugins>
</build>
</project>

Пожалуйста, помогите?

...