Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Pado
Behira Younes
Commits
c95ca4ef
Commit
c95ca4ef
authored
Oct 21, 2020
by
Ratnadeep Rajendra Kharade
Browse files
added form validations
parent
044aab40
Pipeline
#1075
passed with stages
in 8 seconds
Changes
2
Pipelines
1
Show whitespace changes
Inline
Side-by-side
public/index.html
View file @
c95ca4ef
...
@@ -33,16 +33,19 @@
...
@@ -33,16 +33,19 @@
<h3>
Please select an option
</h3>
<h3>
Please select an option
</h3>
</div>
</div>
<div>
<div>
<input
onclick=
"handleTextRadioClick()"
type=
"radio"
id=
"huey"
name=
"drone"
value=
"huey"
checked
>
<input
onclick=
"handleTextRadioClick()"
type=
"radio"
id=
"manual"
name=
"text-input-option"
value=
"manual"
<label
for=
"huey"
>
I will enter text manually.
</label></div>
checked
>
<label
for=
"manual"
>
I will enter text manually.
</label></div>
<div>
<div>
<input
onclick=
"handleTextRadioClick()"
type=
"radio"
id=
"dewey"
name=
"drone"
value=
"dewey"
>
<input
onclick=
"handleTextRadioClick()"
type=
"radio"
id=
"calculated"
name=
"text-input-option"
<label
for=
"dewey"
>
I have already calculated the text length.
</label>
value=
"calculated"
>
<label
for=
"calculated"
>
I have already calculated the text length.
</label>
</div>
</div>
<div
id=
"character-calculation-wrapper"
>
<div
id=
"character-calculation-wrapper"
>
<div>
<div>
<textarea
oninput=
"handleTextAreaChange()"
placeholder=
"Enter text here..."
class=
"box-input"
<textarea
oninput=
"handleTextAreaChange()"
placeholder=
"Enter text here..."
class=
"box-input"
name=
"textarea"
id=
"manual-text-entry"
cols=
"90"
rows=
"5"
value=
""
></textarea>
name=
"textarea"
id=
"manual-text-entry"
cols=
"90"
rows=
"5"
value=
""
></textarea>
<div
id=
"textarea-validation"
style=
"color: red;display: none;"
>
Please enter text
</div>
</div>
</div>
<div>
<div>
<label
for=
"calculatedTextCharacters"
>
Total characters in text:
</label>
<label
for=
"calculatedTextCharacters"
>
Total characters in text:
</label>
...
@@ -54,25 +57,30 @@
...
@@ -54,25 +57,30 @@
<label
for=
"inputTextCharacters"
>
Enter number of characters:
</label>
<label
for=
"inputTextCharacters"
>
Enter number of characters:
</label>
<input
oninput=
"handleCharacterInputChange()"
placeholder=
"e.g. 120"
class=
"box-input"
type=
"number"
<input
oninput=
"handleCharacterInputChange()"
placeholder=
"e.g. 120"
class=
"box-input"
type=
"number"
id=
"inputTextCharacters"
name=
"inputTextCharacters"
value=
""
>
id=
"inputTextCharacters"
name=
"inputTextCharacters"
value=
""
>
<div
id=
"textCharacters-validation"
style=
"color: red;display: none;"
>
Please enter number of characters.
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<label
for=
"readerLevel"
>
Select reader level:
</label>
<label
for=
"readerLevel"
>
Reader Level:
</label>
<select
class=
"box-input"
id=
"readerLevel"
>
<select
class=
"box-input"
id=
"readerLevel"
onchange=
"readerLevelChangeEvent(event)"
>
<option
value=
""
>
Select level
</option>
<option
value=
"First Year"
>
First Year
</option>
<option
value=
"First Year"
>
First Year
</option>
<option
value=
"Second Year"
>
Second Year
</option>
<option
value=
"Second Year"
>
Second Year
</option>
<option
value=
"Third Year"
>
Third Year
</option>
<option
value=
"Third Year"
>
Third Year
</option>
<option
value=
"Fourth Year"
>
Fourth Year
</option>
<option
value=
"Fourth Year"
>
Fourth Year
</option>
</select>
</select>
<div
id=
"readerLevel-validation"
style=
"color: red;display: none;"
>
Please enter number of characters.
</div>
</div>
</div>
<div>
<div>
<label
for=
"readerLevel"
>
Select category of the reader:
</label>
<label
for=
"readerCategory"
>
Reader Category:
</label>
<select
class=
"box-input"
id=
"readerLevel"
>
<select
class=
"box-input"
id=
"readerCategory"
onchange=
"readerCategoryChangeEvent(event)"
>
<option
value=
""
>
Select category
</option>
<option
value=
"Mixed-ability group"
>
Mixed-ability group
</option>
<option
value=
"Mixed-ability group"
>
Mixed-ability group
</option>
<option
value=
"High-ability group"
>
High-ability group
</option>
<option
value=
"High-ability group"
>
High-ability group
</option>
<option
value=
"Good-ability group"
>
Good-ability group
</option>
<option
value=
"Good-ability group"
>
Good-ability group
</option>
<option
value=
"Average-ability group"
>
Average-ability group
</option>
<option
value=
"Average-ability group"
>
Average-ability group
</option>
</select>
</select>
<div
id=
"readerCategory-validation"
style=
"color: red;display: none;"
>
Please enter number of characters.
</div>
</div>
</div>
<div>
<div>
<div>
<div>
...
@@ -122,9 +130,10 @@
...
@@ -122,9 +130,10 @@
</section>
</section>
</section>
</section>
<script
src=
"index.js"
type=
"text/javascript"
>
</script>
<!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
<!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
<script
src=
"settings.js"
>
</script>
<script
src=
"settings.js"
>
</script>
<script
src=
"index.js"
>
</script>
</body>
</body>
</html>
</html>
\ No newline at end of file
public/index.js
View file @
c95ca4ef
let
inputObj
=
{};
let
inputObj
=
{
textChoice
:
'
manual
'
,
text
:
''
,
textLength
:
''
,
readerLevel
:
''
,
readerCategory
:
''
};
function
handleTextRadioClick
()
{
function
handleTextRadioClick
()
{
let
textChoice
=
document
.
querySelector
(
'
input[name="
dr
on
e
"]:checked
'
).
value
;
let
textChoice
=
document
.
querySelector
(
'
input[name="
text-input-opti
on"]:checked
'
).
value
;
console
.
log
(
textChoice
);
console
.
log
(
textChoice
);
inputObj
.
textChoice
=
textChoice
;
toggleElement
(
'
character-calculation-wrapper
'
);
toggleElement
(
'
character-calculation-wrapper
'
);
toggleElement
(
'
manual-character-input
'
);
toggleElement
(
'
manual-character-input
'
);
}
}
...
@@ -19,6 +26,7 @@ function toggleElement(id) {
...
@@ -19,6 +26,7 @@ function toggleElement(id) {
function
handleTextAreaChange
()
{
function
handleTextAreaChange
()
{
let
value
=
document
.
getElementById
(
"
manual-text-entry
"
).
value
;
let
value
=
document
.
getElementById
(
"
manual-text-entry
"
).
value
;
value
=
value
.
trim
();
value
=
value
.
trim
();
inputObj
.
text
=
value
;
let
characters
=
value
.
split
(
'
'
).
join
(
''
).
length
;
let
characters
=
value
.
split
(
'
'
).
join
(
''
).
length
;
setCharacterLength
(
characters
);
setCharacterLength
(
characters
);
document
.
getElementById
(
"
calculatedTextCharacters
"
).
setAttribute
(
'
value
'
,
characters
)
document
.
getElementById
(
"
calculatedTextCharacters
"
).
setAttribute
(
'
value
'
,
characters
)
...
@@ -30,16 +38,59 @@ function handleCharacterInputChange() {
...
@@ -30,16 +38,59 @@ function handleCharacterInputChange() {
}
}
function
setCharacterLength
(
characters
)
{
function
setCharacterLength
(
characters
)
{
inputObj
.
characters
=
characters
;
inputObj
.
textLength
=
characters
;
console
.
log
(
'
Character length:
'
+
inputObj
.
characters
);
console
.
log
(
'
Character length:
'
+
inputObj
.
textLength
);
}
}
function
calculateReadingTime
()
{
function
calculateReadingTime
()
{
let
isFormValid
=
validateForm
();
let
x
=
document
.
getElementById
(
'
calculate-time-element
'
);
let
x
=
document
.
getElementById
(
'
calculate-time-element
'
);
x
.
style
.
display
=
"
block
"
;
x
.
style
.
display
=
"
block
"
;
}
}
function
validateForm
()
{
let
invalidFields
=
0
;
if
(
inputObj
.
textChoice
===
'
manual
'
&&
inputObj
.
text
===
''
)
{
invalidFields
++
;
document
.
getElementById
(
'
textarea-validation
'
).
style
.
display
=
'
block
'
;
}
else
{
document
.
getElementById
(
'
textarea-validation
'
).
style
.
display
=
'
none
'
;
}
if
(
inputObj
.
textChoice
===
'
calculated
'
&&
(
inputObj
.
textLength
===
''
||
inputObj
.
textLength
===
0
))
{
invalidFields
++
;
document
.
getElementById
(
'
textCharacters-validation
'
).
style
.
display
=
'
block
'
;
}
else
{
document
.
getElementById
(
'
textCharacters-validation
'
).
style
.
display
=
'
none
'
;
}
if
(
inputObj
.
readerLevel
===
''
)
{
invalidFields
++
;
document
.
getElementById
(
'
readerLevel-validation
'
).
style
.
display
=
'
block
'
;
}
else
{
document
.
getElementById
(
'
readerLevel-validation
'
).
style
.
display
=
'
none
'
;
}
if
(
inputObj
.
readerCategory
===
''
)
{
invalidFields
++
;
document
.
getElementById
(
'
readerCategory-validation
'
).
style
.
display
=
'
block
'
;
}
else
{
document
.
getElementById
(
'
readerCategory-validation
'
).
style
.
display
=
'
none
'
;
}
}
function
showFeedbackForm
()
{
function
showFeedbackForm
()
{
let
x
=
document
.
getElementById
(
'
feedback-form
'
);
let
x
=
document
.
getElementById
(
'
feedback-form
'
);
x
.
style
.
display
=
"
block
"
;
x
.
style
.
display
=
"
block
"
;
}
}
function
readerLevelChangeEvent
(
event
)
{
console
.
log
(
event
.
target
.
value
)
inputObj
.
readerLevel
=
event
.
target
.
value
;
}
function
readerCategoryChangeEvent
(
event
)
{
console
.
log
(
event
.
target
.
value
)
inputObj
.
readerCategory
=
event
.
target
.
value
;
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment