我正在尝试发送表单之前执行不同的javascript验证，问题是我无法阻止表单提交，它检查条件并在条件不满足时发送警报，但是无论如何它都会发送表格。我希望禁用该按钮，直到一切正确为止，或者发送一条消息告诉用户，以检查提示。 提前致谢。这是我的代码：
class Company(models.Model):
name = models.CharField(
max_length=40,
verbose_name=_('Name'))
legal_name = models.CharField(
max_length=100, null=True,
blank=True, verbose_name=_('Legal name'))
tax_id = models.CharField(
max_length=12, null=True,
blank=True, verbose_name=_('Tax ID'))
url = models.URLField(
null=True, blank=True, verbose_name=_('URL'))
address = models.TextField(
max_length=400, null=True,
blank=True, verbose_name=_('Address'))
class Contract(models.Model):
DOLAR = 'USD'
EURO = 'EURO'
PESO = 'MXN'
CURRENCY_CHOICES = (
(DOLAR, _('USD')),
(EURO, _('EURO')),
(PESO, _('MXN'))
)
PENDING = 'PENDING'
SIGNED = 'SIGNED'
DUE = 'DUE'
CANCELLED = 'CANCELLED'
STATUS_CHOICES = (
(PENDING, _('Pending')),
(SIGNED, _('Signed')),
(DUE, _('Due')),
(CANCELLED, _('Cancelled'))
)
company = models.ForeignKey(
Company, on_delete=models.PROTECT,
related_name='contracts', verbose_name=_('Company'))
representative_name = models.CharField(
max_length=100, verbose_name=_('Representative Name'))
representative_email = models.EmailField(
verbose_name=_('eMail'))
representative_phone = models.CharField(
max_length=12, verbose_name=_('Representative Phone'))
representative_fax = models.CharField(
max_length=12, null=True, blank=True,
verbose_name=_('Representative Fax'))
start_date = models.DateField(
verbose_name=_('Start Date'))
due_date = models.DateField(
verbose_name=_('Due Date'))
currency = models.CharField(
max_length=10, choices=CURRENCY_CHOICES,
default=DOLAR, verbose_name=_('Currency'))
days_credit = models.SmallIntegerField(
null=True, blank=True, verbose_name=_('Days of Credit'))
pre_pay = models.BooleanField(
default=True, verbose_name=_('Pre-Pay'))
advertising = models.TextField(
null=True, blank=True, verbose_name=_('Advertising'))
includes_comment = models.TextField(
null=True, blank=True, verbose_name=_('Includes'))
comment = models.TextField(
null=True, blank=True, verbose_name=_('Comment'))
status = models.CharField(
max_length=9, choices=STATUS_CHOICES,
default=PENDING, verbose_name=_('Status'))
room_types = models.ManyToManyField(
RoomType, verbose_name=_('Room Types'))
plan_types = models.ManyToManyField(
PlanType, verbose_name=_('Plan Type'))
ages = models.ManyToManyField(
Ages, verbose_name=_('Ages'))
markets = models.ManyToManyField(
Market, verbose_name=_('Market'))
class Hotel(models.Model):
ONE_STAR = '*'
TWO_STARS = '**'
THREE_STARS = '***'
FOUR_STARS = '****'
FIVE_STARS = '*****'
GRAND_TOURISM = 'GRAND_TOURISM'
NA = 'NA'
SPECIAL = 'SPECIAL'
ECO = 'ECO'
BOUTIQUE = 'BOUTIQUE'
HOTEL_CATEGORY_CHOICES = (
(ONE_STAR, _('*')),
(TWO_STARS, _('**')),
(THREE_STARS, _('***')),
(FOUR_STARS, _('****')),
(FIVE_STARS, _('*****')),
(GRAND_TOURISM, _('Grand Tourism')),
(NA, _('NA')),
(SPECIAL, _('Special')),
(ECO, _('Eco-Hotel')),
(BOUTIQUE, _('Boutique-Hotel'))
)
company = models.OneToOneField(
Company, on_delete=models.CASCADE,
primary_key=True, verbose_name=_('Company'))
code = models.CharField(
max_length=10, verbose_name=_('Code'))
zone = models.ForeignKey(
Zone, on_delete=models.PROTECT,
related_name='hotels', verbose_name=_('Zone'))
category = models.CharField(
max_length=20, choices=HOTEL_CATEGORY_CHOICES,
verbose_name=_('Category'))
capacity = models.IntegerField(
verbose_name=_('Capacity'))
position = models.DecimalField(
max_digits=11, decimal_places=2, default=0.00,
verbose_name=_('Position'))
in_pickup = models.BooleanField(
default=False, verbose_name=_('In pickup?'))
is_active = models.BooleanField(
default=True, verbose_name=_('Is active?'))
latitude = models.FloatField(
null=True, blank=True, verbose_name=_('Latitude'))
longitude = models.FloatField(
null=True, blank=True, verbose_name=_('Longitude'))
iframe = models.CharField(
max_length=100, null=True, blank=True,
verbose_name=_('Google iFrame'))
class RoomType(models.Model):
hotel = models.ForeignKey(
Hotel, on_delete=models.PROTECT,
related_name='room_types', verbose_name=_('Hotel'))
name = models.CharField(
max_length=40, verbose_name=_('Name'))
答案 0 :(得分：0)
我将表单提交按钮的类型更改为“按钮”，如果所有验证都通过了，则可以从javascript提交表单。
参见下面的代码
function compareclabe() {
document.getElementById("myBtn").disabled = true;
var x1 = document.getElementById("clabe").value;
var x2 = document.getElementById("control").value;
var x3 = x1 + x2;
var z1 = document.getElementById("clabe2").value;
var z2 = document.getElementById("control2").value;
var z3 = z1 + z2;
if (x3 != z3) {
alert("keys are not equal");
return false;
} else if (x3 == z3) {
this.someFunc(); //I want to call function someFunc and then if the result is true, execute the next code
if (true) {
var cBanco = String(x3).charAt(0) + String(x3).charAt(1) + String(x3).charAt(2);
var x = cBanco;
switch (x) {
case "012":
text = "BBVA BANCOMER";
break;
case "014":
text = "SANTANDER";
break;
case "032":
text = "IXE";
break;
default:
text = "No value found";
}
document.getElementById("Banco").value = text;
document.getElementById("myBtn").disabled = false;
$('#form').submit(); //submit form if all validation succeeds
}
} else {
return false;
}
}
function someFunc() {
//myFunction2();
var x = document.getElementById("clabe2").value;
f2(x, '37137137137137137');
//return true;
}
function f2(a, b) {
var cad = Array.from(a, (v, i) => v * b[i] % 10).join('');
//se suman todos los digitos del array
var value = cad,
sum = value
.toString()
.split('')
.map(Number)
.reduce(function(a, b) {
return a + b;
}, 0);
//separate last digit from result
var number = sum;
// convert number to a string, then extract the first digit
var one = String(number).charAt(1);
// convert the first digit back to an integer
var one_as_number = Number(one);
var digito_control = (10 - one_as_number);
if (digito_control === 10) {
digito_control = 0;
var dg = digito_control;
} else {
dg = digito_control;
}
var z = document.getElementById("control2").value;
if (dg != z) {
alert("checkig digit is not equal");
return false;
} else if (dg == z) {
alert("checkig digit is equal");
return true;
}
}<form action="<?php echo base_url();?>index.php/Datos/agregar" method="post" id="form"> <!-- I included an id to form -->
Enter CLABE account:
<input name="clabe" id="clabe" type="text" pattern=".{17,17}" maxlength="17" required title="17 números exactamente" />
<input type="text" name="control" id="control" maxlength="1" size="2" required> Again:
<input name="clabe2" id="clabe2" type="text" pattern=".{17,17}" maxlength="17" required title="17 números exactamente" />
<input type="text" name="control2" id="control2" maxlength="1" size="2" required>
<hr> Bank: <input type="text" name="Banco" id="Banco" readonly required onmousemove="comparaclabe();">
<hr> Observations: <input type="text" name="Observaciones" id="Observaciones" required>
<hr>
<input type="button" id="myBtn" value="Guardar Cambios" onclick="return compareclabe();"><span id="msg"></span>
<hr>
<input type="hidden" id="cve_banco" name="cve_banco">
</form>
<hr>
但是有许多验证插件可以轻松实现。无需从头开始编写代码。请参考此示例-> https://jqueryvalidation.org/
答案 1 :(得分：0)
您可以默认禁用按钮，并将事件侦听器添加到表单中的所有输入。但是请厌倦其他提交表单的方式，例如回车键。我会添加一个onsubmit函数，以防止事件在您不希望发生的所有情况下发生。
const form = document.querySelector('form')
const inputs = [...form.querySelectorAll('input')] // convert node list to array
const isValid = () => {
let valid = false
disableButton()
// handle your conditions here
if (valid) enableButton()
return valid;
}
inputs.forEach( input => input.addEventListener('input', isValid))
form.onsubmit = event => if (!isValid()) event.preventDefault()
如果愿意，可以使用ES5：
var form = document.querySelector('form');
var inputNodes = form.querySelectorAll('input');
var inputs = Array.prototype.call.slice(inputNodes); // convert node list to array
var isValid = function() {
var valid = false;
disableButton();
// handle your conditions here
if (valid) enableButton();
return valid
}
inputs.forEach( function(input) {
input.addEventListener('input', isValid);
});
form.onsubmit = function(event) {
if (!isValid()) event.preventDefault();
};
还值得注意的是，HTML5有很多built-in validation您可以利用。