Question

早上好，

我正在进行一些简单的表单验证。每当我提交表单时，都会显示错误消息，但我可以反复向该按钮发送垃圾邮件以查看大量错误消息。有没有办法我可以改变它只显示一次错误信息？我还注意到，即使我填充了两个字段，它仍然会在我的控制台中快速闪烁并显示错误日志但不显示错误。

谁能告诉我这里我做错了什么？

	var uname = document.forms['signIn']['userame'].value;
	var pword = document.forms['signIn']['password'].value;

	function validateMe (e) {
		if (uname.length || pword.length < 1 || '') {
		var container = document.getElementById('error-container');
		var errorMsg = document.createElement('div');
		errorMsg.className = 'error-message';
		errorMsg.innerHTML = '<span class="heading-large">Please enter a valid username or password</span>';
		container.appendChild(errorMsg);
		console.log('An error occured');
		return false;
		} 
	 
	}

<form id="signIn" action='#'>
				<div class="boxed left-floater">
					<h1 class="heading-large margin-top">Sign in</h1>
					<div id="error-container"></div>
					<div class="form-group">
						<label class="form-label-bold" for="username">Username</label>
						<input class="form-control log-in-form-control" id="username" name="username" type="text">
					</div>
					<div class="form-group">
						<label class="form-label-bold" for="password">Password</label>
						<input class="form-control log-in-form-control" id="password" type="password" name="password">
					</div>
					<div>
						<a class="right-floater forgotten-password" href="forgottenpassword.html">Forgotten Password</a>
						<button class="button clear right-floater" type="submit" onclick="validateMe();">Sign In</button>
					</div>
				</div>
			</form>

Fiddle

Answer 1

这是完整的工作代码

＆＃13;

<form id="signIn">
  <div class="boxed left-floater">
    <h1 class="heading-large margin-top">Sign in</h1>
    <div id="error-container"></div>
    <div class="form-group">
      <label class="form-label-bold" for="username">Username</label>
      <input class="form-control log-in-form-control" id="username" name="username" type="text">
    </div>
    <div class="form-group">
      <label class="form-label-bold" for="password">Password</label>
      <input class="form-control log-in-form-control" id="password" type="password" name="password">
    </div>
    <div>
      <a class="right-floater forgotten-password" href="forgottenpassword.html">Forgotten Password</a>
      <button class="button clear right-floater" type="submit" onclick="validateMe(event);">Sign In</button>
    </div>
  </div>
</form>

＆＃13;

protected override void OnCreate(Bundle bundle)
        {
        base.OnCreate(bundle);
        SetContentView(Resource.Layout.Main);
        videoPath = Android.OS.Environment.ExternalStorageDirectory.AbsolutePath + "/myVideo.mp4";
        btnRecord = FindViewById<Button>(Resource.Id.btnRecord);
        imgBtnCancel = FindViewById<Button>(Resource.Id.btnCancel);
        imgBtnOk = FindViewById<Button>(Resource.Id.btnConfirm);
        videoView = FindViewById<VideoView>(Resource.Id.SampleVideoView);

        var recordOk = PrepareVideoRecorder();
        btnRecord.Click += delegate
        {
            if (!hasRecordClick)
            {
                if (recordOk)
                {
                    _mediaRecorder.Start();
                    hasRecordClick = true;
                }
                else
                {
                    ReleaseMediaRecorder();
                }
            }
            else
            {
                _mediaRecorder.Stop();
                ReleaseMediaRecorder();
                camera.Lock();
                btnRecord.Visibility = ViewStates.Gone;
                imgBtnOk.Visibility = ViewStates.Visible;
                imgBtnCancel.Visibility = ViewStates.Visible;
            }
        };
        }

    bool PrepareVideoRecorder()
    {
        camera = Camera.Open();
        _mediaRecorder = new MediaRecorder();

        camera.Unlock();
        _mediaRecorder.SetCamera(camera);
        _mediaRecorder.SetVideoSource(VideoSource.Camera);
        _mediaRecorder.SetAudioSource(AudioSource.Camcorder);

        _mediaRecorder.SetOutputFormat(OutputFormat.Default);
        _mediaRecorder.SetVideoEncoder(VideoEncoder.Default);
        _mediaRecorder.SetAudioEncoder(AudioEncoder.Default);

        _mediaRecorder.SetOutputFile(GetOutputMediaFilePath());
        _mediaRecorder.SetPreviewDisplay(videoView.Holder.Surface);
        try
        {
            _mediaRecorder.Prepare();
            return true;
        }
        catch (Exception ex)
        {
            Console.WriteLine("caught exception {0}", ex);
            ReleaseMediaRecorder();
            return false;
        }
    }

＆＃13;

Answer 2

您必须清除container的内容，以避免重复元素。以下几点需要注意：

您试图在小提琴中使用 userame 而不是用户名。可能是拼写错误。
保留input type=submit代替button
将event传递给validateMe function，以防止发布默认操作。
移动函数中的变量以始终获取实际值

＆＃13;

function validateMe(e) {
  e.preventDefault();
  var uname = document.forms['signIn']['username'].value;
  var pword = document.forms['signIn']['password'].value;
  var container = document.getElementById('error-container');
  container.innerHTML = ''; //Clear the contents instead of repeating it
  if (uname.length < 1 || pword.length < 1) {
    var errorMsg = document.createElement('div');
    errorMsg.className = 'error-message';
    errorMsg.innerHTML = '<span class="heading-large">Please enter a valid username or password</span>';
    container.appendChild(errorMsg);
    console.log('An error occured');
    return false;
  }
}

＆＃13;

<form id="signIn" action='#'>
  <div class="boxed left-floater">
    <h1 class="heading-large margin-top">Sign in</h1>
    <div id="error-container"></div>
    <div class="form-group">
      <label class="form-label-bold" for="username">Username</label>
      <input class="form-control log-in-form-control" id="username" name="username" type="text">
    </div>
    <div class="form-group">
      <label class="form-label-bold" for="password">Password</label>
      <input class="form-control log-in-form-control" id="password" type="password" name="password">
    </div>
    <div>
      <a class="right-floater forgotten-password" href="forgottenpassword.html">Forgotten Password</a>
      <input value="Sign In" class="button clear right-floater" type="submit" onclick="validateMe(event);" />
    </div>
  </div>
</form>

＆＃13;

<强> Updated Fiddle

修改 - if condition失败并相应更新

JavaScript表单验证无法按预期工作

2 个答案: