Проверка формы не работает при добавлении D3 - PullRequest
1 голос
/ 29 мая 2020

Я создал форму с переключателями, используя d3, как показано ниже:

var rating_form = d3.select("body")
		.append('form')
		.attr('class', 'rating');

 // Appending up and down vote radio button
	var radio_groups = rating_form.append('div').attr('class', 'form-group');

	// Radio for up
	var radio_grp_chk = radio_groups
		.append('div')
		.attr('class', 'form-check form-check-inline upvote');
	radio_grp_chk
		.append('input')
		.attr('class', 'form-check-input')
		.attr('type', 'radio')
		.attr('name', 'voting-radio')
		.attr('value', 'thumbup')
		.attr("required", "");
	radio_grp_chk.append('span').text("upvote");


	// Radio for down
	var radio_grp_chk2 = radio_groups
		.append('div')
		.attr('class', 'form-check form-check-inline downvote');
	radio_grp_chk2
		.append('input')
		.attr('class', 'form-check-input')
		.attr('type', 'radio')
		.attr('name', 'voting-radio')
		.attr('value', 'thumbdown')
		.attr("required", "");
	radio_grp_chk2.append('span').text("downvote");

	// Appending text area
	rating_form
		.append('div')
		.attr('class', 'form-group')
		.append('textarea')
		.attr('class', 'form-control feedback-text')
		.attr('placeholder', 'Enter your text...');

	// Submit button
	rating_form
		.append('button')
		.attr('type', 'button')
		.attr('class', 'btn btn-primary rating-btn')
		.text('Submit!');
<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        crossorigin="anonymous">
</head>

<body>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.0.min.js" crossorigin="anonymous"></script>
</body>

Для переключателя input я добавляю .attr("required", ""), чтобы сделать его обязательным для выбора перед отправкой. Однако, когда я не выбираю переключатель и не нажимаю кнопку «Отправить», сообщение об ошибке не должно появляться.

Как исправить?

1 Ответ

1 голос
/ 29 мая 2020

Проблема не в вашем .attr("required", ""), проблема в том, что ваш тип кнопки должен быть "submit" вместо "button":

rating_form
    .append('button')
    .attr('type', 'submit')
    //etc...

Поскольку "submit" является типом по умолчанию, вы также можете просто удалить метод .attr('type', 'button').

Вот ваш код с этим изменением:

var rating_form = d3.select("body")
		.append('form')
		.attr('class', 'rating');

 // Appending up and down vote radio button
	var radio_groups = rating_form.append('div').attr('class', 'form-group');

	// Radio for up
	var radio_grp_chk = radio_groups
		.append('div')
		.attr('class', 'form-check form-check-inline upvote');
	radio_grp_chk
		.append('input')
		.attr('class', 'form-check-input')
		.attr('type', 'radio')
		.attr('name', 'voting-radio')
		.attr('value', 'thumbup')
		.attr("required", "");
	radio_grp_chk.append('span').text("upvote");


	// Radio for down
	var radio_grp_chk2 = radio_groups
		.append('div')
		.attr('class', 'form-check form-check-inline downvote');
	radio_grp_chk2
		.append('input')
		.attr('class', 'form-check-input')
		.attr('type', 'radio')
		.attr('name', 'voting-radio')
		.attr('value', 'thumbdown')
		.attr("required", "");
	radio_grp_chk2.append('span').text("downvote");

	// Appending text area
	rating_form
		.append('div')
		.attr('class', 'form-group')
		.append('textarea')
		.attr('class', 'form-control feedback-text')
		.attr('placeholder', 'Enter your text...');

	// Submit button
	rating_form
		.append('button')
		.attr('type', 'submit')
		.attr('class', 'btn btn-primary rating-btn')
		.text('Submit!');
<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        crossorigin="anonymous">
</head>

<body>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.0.min.js" crossorigin="anonymous"></script>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...