Я пытаюсь выполнить проверку формы HTML с помощью javascript, все работало, пока я не добавил часть соответствия регулярному выражению. С тех пор, как только нажимается кнопка отправки, страница обновляется и не выполняется никакая проверка формы под ней.
// ISSUE HERE
if(refNum.value.match(/^((?!S[0-9]).)*$/)){
text = "Please enter a valid reference number"
error_message.innerHTML=text;
return false;
}
Выше находится область, с которой у меня возникли проблемы, в настоящее время он проверяет все, что не соответствует этому шаблону, и выводит сообщение об ошибке, которое я хочу, но когда он действительно соответствует шаблону, который я хочу, он просто обновляет страницу, и весь прогресс в форме теряется. Проверка без этой области работает нормально, но я должен сохранить ее как часть rubri c и не могу найти исправление. Ниже приведен полный код проверки формы, я надеюсь, вы можете помочь, спасибо за ваше время.
"use strict";
//Validate Form
function validate(){
var refNum = document.getElementById('refNum').value;
var error_message = document.getElementById('error_message');
var text;
//Reference Number validation
if(refNum.length == 0){
text = "Please enter a reference number"
error_message.innerHTML=text;
return false;
}
else if(refNum.length < 6|| refNum.length >6){
text = "Please enter a valid reference number"
error_message.innerHTML=text;
return false;
}
// ISSUE HERE
if(refNum.value.match(/^((?!S[0-9]).)*$/)){
text = "Please enter a valid reference number"
error_message.innerHTML=text;
return false;
}
//Username Validation
var userName = document.getElementById('userName').value;
if(userName.length <2 || userName.length > 20){
text = "Username must be between 2 and 20 characters"
error_message.innerHTML=text;
return false;
}
//Phone Number Validation
var phoneNum = document.getElementById('phoneNum').value;
if(phoneNum.length !=10){
text = "Please Enter a valid phone number"
error_message.innerHTML=text;
return false;
}
else {
alert(refNum)
}
return false
}
Затронутые HTML КОД
<!-- Seminar ref num -->
<p>
<div class=input_field>
<label for="refNum">Seminar ref number:</label>
<input type="text" name="refNum" placeholder="S00000" id="refNum" >
</div>
</p>
Весь HTML КОД
<?php session_start(); ?>
<!-- write header comments here -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="A registration page" >
<meta name="keywords" content="Register, form, input">
<meta name="author" content="Ethan Franks" >
<title>Seminar registration</title>
<link href="styles/style.css" rel="stylesheet" >
<script src="scripts/validate.js"></script>
</head>
<body>
<?php
require_once ("settings.php");
$conn = @mysqli_connect($host,$user,$pwd,$sql_db);
if (!$conn) {
echo "<p>Failed to connect to database</p>";
}
$page="register_page";
include_once "header.inc";
include_once "nav.inc";
?>
<div class="wrapper">
<h2>Register For Seminar</h2>
<div id= "error_message"></div>
<fieldset>
<form id="registerForm" method="post" onsubmit="return validate()" action="process.php">
<!-- Seminar ref num -->
<p>
<div class=input_field>
<label for="refNum">Seminar ref number:</label>
<input type="text" name="refNum" placeholder="S00000" id="refNum" >
</div>
</p>
<!-- username -->
<div class="input_field"
<p>
<label for="userName">Username:</label>
<input type="text" name="userName" placeholder="Username" id="userName" >
</p>
</div>
<hr>
<!-- Qualification level -->
<input type="radio" id="underGraduate" name="qualLevel" value="underGraduate">
<label for="underGraduate">Undergraduate</label><br>
<input type="radio" id="postGraduate" name="qualLevel" value="postGraduate">
<label for="postGraduate">Postgraduate</label><br>
<!-- Email -->
<div class="input_field">
<label for="email">Enter your email:</label>
<input type="email" id="email" placeholder="johnsmith@gmail.com" name="email">
</div>
<!-- Phone Number -->
<div class="input_field">
<p>
<label for="phoneNum">Phone number:</label>
<input type="text" name="phoneNum" placeholder="0000000000" id="phoneNum" >
</p>
</div>
<!-- submit and reset -->
<p>
<div class="btn">
<input type="submit" value="Register" >
<input type="reset" value="Reset" >
</div>
</p>
</form>
</div>
<?php
include_once "footer.inc";
?>
</body>
</html>