Flag invalid input and disable test button if invalid.

diff --git a/test/index.html b/test/index.html
index ad6e29a51cfefc29ded756af00fd6787e79d19c5..3091e3311d1942763251a670dd710b7b21b00cf9 100644 (file)
--- a/test/index.html
+++ b/test/index.html
@@ -28,7 +28,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
                import { Cache, Logger, stats } from 'nano-pow/utils'
 
                if (NanoPow && Logger) {
-                       document.getElementById('btnStartTest').disabled = false
+                       document.getElementById('btnStartTest').disabled = !document.getElementById('difficulty').validity.valid
                        document.getElementById('status').textContent = `READY`
                }
 
@@ -262,12 +262,13 @@ SPDX-License-Identifier: GPL-3.0-or-later
                 * @param {InputEvent} event
                 */
                function startValidation(event) {
-                       const difficulty = document.getElementById('difficulty')?.value
+                       const difficulty = document.getElementById('difficulty')
                        const work = document.getElementById('work')?.value
                        const hash = document.getElementById('hash')?.value
                        const validation = document.getElementById('validation')
                        const api = document.getElementById('api')?.value
                        const apiContainer = document.getElementById('api')?.parentElement
+                       document.getElementById('btnStartTest').disabled = !difficulty.validity.valid
                        if (api === 'CPU') {
                                apiContainer.classList.add('warning')
                                apiContainer.title = 'Use only for testing with very low difficulty.'
@@ -277,7 +278,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
                        }
                        validation.innerText = `\u23f3`
                        if (work.length === 16 && hash.length === 64) {
-                               NanoPow.work_validate(work, hash, { difficulty })
+                               NanoPow.work_validate(work, hash, { difficulty: difficulty?.value })
                                        .then(result => {
                                                validation.innerText = +result.valid
                                                        ? `\u2713`
@@ -303,6 +304,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
                        const effort = document.getElementById('effort')
                        const size = document.getElementById('size')
                        const runs = document.getElementById('runs')
+                       if (!difficulty.validity.valid) return
                        test(api.value, difficulty.value, +effort.value, +size.value, +runs.value)
                                .then(() => {
                                        event.target.disabled = false
@@ -324,6 +326,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
                button,input,select{font-size:1rem;margin-bottom:0.5rem;}
                input[type=checkbox]{margin-right:2em;}
                input[type=number]{width:5em;}
+               input:invalid{border:2px solid red;}
                div:has(>label){display:inline-block;}
                div.hex{display:inline-block;font-family:monospace;}
                div.hex::before{color:grey;content:'0x';display:inline-block;font-family:monospace;font-size:1rem;left:0.25rem;position:relative;width:0;}
@@ -335,6 +338,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
                .full-width{width:100%;}
                .warning::before{content:'\0026a0\00FE0F';}
                #hash{max-width:40rem;width:80vw;}
+               #difficulty{width:10rem;}
                #work{width:10rem;}
        </style>
 </head>
@@ -370,12 +374,12 @@ SPDX-License-Identifier: GPL-3.0-or-later
        <div>
                <div class="full-width">
                        <label for="hash" class="hex">Block&nbsp;Hash</label>
-                       <div class="hex"><input id="hash" type="text" /></div>
+                       <div class="hex"><input id="hash" type="text" pattern="[0-9A-Fa-f]{64}" /></div>
                </div>
        </div>
        <div>
                <label for="work">Work</label>
-               <div class="hex"><input id="work" type="text" /></div>
+               <div class="hex"><input id="work" type="text" pattern="[0-9A-Fa-f]{16}" /></div>
                <span id="validation"></span>
        </div>
        <hr />
@@ -392,7 +396,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
                </div>
                <div>
                        <label for="difficulty" class="hex">Difficulty</label>
-                       <div class="hex"><input id="difficulty" type="text" value="FFFFFFF800000000" /></div>
+                       <div class="hex"><input id="difficulty" type="text" pattern="[0-9A-Fa-f]{1,16}" value="FFFFFFF800000000" /></div>
                </div>
                <div>
                        <label for="effort">Effort&nbsp;(1&#8209;32)</label>