Skip to content

Instantly share code, notes, and snippets.

@smeghead

smeghead/radio-fail.html

Created February 7, 2020 01:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save smeghead/e23e0884e9399b718f6a29e347d1e92f to your computer and use it in GitHub Desktop.
Save smeghead/e23e0884e9399b718f6a29e347d1e92f to your computer and use it in GitHub Desktop.
Download ZIP
Semantic UI のラジオボタンのvalidationエラーメッセージの挙動の変更
Raw
radio-fail.html
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properties -->
<title>Semantic UI radio validation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha256-9mbkOfVho3ZPXfM7W8sV2SndrGDuh7wuyLjtsWeTI1Q=" crossorigin="anonymous" />
</head>
<body>
<div class="ui container">
<h1>Semantic UI radio validation</h1>
<form class="ui form">
<div class="field">
<div class="inline fields">
<label for="gender">Gender:</label>
<div class="field">
<div class="ui radio checkbox">
<input id="gender-male" type="radio" name="gender" value="1" tabindex="0" class="">
<label for="gender-male">Male</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input id="gender-female" type="radio" name="gender" value="2" tabindex="0" class="">
<label for="gender-female">Female</label>
</div>
</div>
</div>
</div>
<button class="ui primary button" type="submit">Submit</button>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha256-t8GepnyPmw9t+foMh3mKNvcorqNHamSKtKRxxpUEgFI=" crossorigin="anonymous"></script>
<script>
$(function(){
$('.ui.form').form({
inline: true,
fields: {
gender: {
rules: [{
type : 'checked',
prompt : 'please select.'
}]
},
},
});
});
</script>
</body>
</html>
Raw
radio-success.html
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properties -->
<title>Semantic UI radio validation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha256-9mbkOfVho3ZPXfM7W8sV2SndrGDuh7wuyLjtsWeTI1Q=" crossorigin="anonymous" />
</head>
<body>
<div class="ui container">
<h1>Semantic UI radio validation</h1>
<form class="ui form">
<div class="field">
<div class="inline fields">
<label for="gender">Gender:</label>
<div class="field no-prompt">
<div class="ui radio checkbox">
<input id="gender-male" type="radio" name="gender" value="1" tabindex="0" class="">
<label for="gender-male">Male</label>
</div>
</div>
<div class="field no-prompt">
<div class="ui radio checkbox">
<input id="gender-female" type="radio" name="gender" value="2" tabindex="0" class="">
<label for="gender-female">Female</label>
</div>
</div>
</div>
</div>
<button class="ui primary button" type="submit">Submit</button>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha256-t8GepnyPmw9t+foMh3mKNvcorqNHamSKtKRxxpUEgFI=" crossorigin="anonymous"></script>
<script>
$(function(){
$('.ui.form').form({
inline: true,
fields: {
gender: {
rules: [{
type : 'checked',
prompt : 'please select.'
}]
},
},
selector: {
group: '.field:not(.no-prompt)',
},
});
console.log('selector', $.fn.form.settings.selector);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment